[Bug] KB explainer demo clips the 5th stage (`Entity`) on mobile (≤390px viewport)

[FireTable]

Bug: KB explainer demo truncates the "Entity" stage on mobile (≤390px viewport)

Where

Landing page → "How it works" section → "Knowledge base" row (KbExplainerDemo)

File: components/landing/motion/kb-explainer-demo.tsx

What

On mobile viewports (iPhone SE 375px, iPhone 14 390px) the KB ingest pipeline row inside the explainer card overflows the document's right edge. The 5th stage box (Entity) gets pushed beyond the visible area and is cut off.

Measured overflow:

• iPhone SE (375×667): Entity stage overflows document right by +25.1 px
• iPhone 14 (390×844): overflows by +10.1 px
• iPhone 14 Pro Max (430×932): no overflow ✅

The 4 sibling stage boxes (PDF / OCR / CHUNK / EMBED) plus 4 arrow icons + gap-1.5 are laid out in a single non-wrapping flex row that always renders 5 stage tiles — but the container width on mobile isn't enough to fit all 5.

Repro

1. pnpm dev on main
2. Open http://localhost:3000/ in a mobile-sized viewport (Chrome DevTools → iPhone SE / iPhone 14)
3. Scroll to "How it works" → "Knowledge base" row
4. Observe the demo card: only 4 stage boxes visible, Entity missing

Screenshots

iPhone SE 375px — 5th stage box (Entity) clipped off the right edge:

iPhone 14 390px — same bug, smaller overflow:

Root cause (locator, not the fix)

components/landing/motion/kb-explainer-demo.tsx:281 — the pipeline row uses a non-wrapping flex container:

<div className="flex items-center justify-between gap-1.5">
  {STAGES.map((stage, i) => (
    <Fragment key={stage.id}>
      <StageBox stage={stage} lit={i < pipelineLit} />
      {i < STAGES.length - 1 && <ArrowRightIcon … />}
    </Fragment>
  ))}
</div>

With 5 stages + 4 arrows + gap-1.5 + size-11 (44px) per stage box, the row needs ~336px minimum; on a 343px-wide card on a 375px viewport there isn't enough room, so the last item spills past the document edge.

Suggested fix directions (left to maintainer)

• Wrap pipeline row to 2 lines on narrow viewports (e.g. flex-wrap + smaller arrows, or a 2-row grid)
• Drop the Entity stage from this row and re-use it as the connector into the "Entity graph" panel below
• Hide stage labels below a breakpoint and rely on the icon + tooltip

Not filing the fix — just the report. Repro and locator should be enough for whoever picks it up.

[FireTable]

✅ Verified — fix landed (65788a7)

Re-ran the same Playwright probe against https://ai.firetable.tech/ after the deploy. All three viewports now measure 0 px overflow on the Entity stage.

Viewport	Before (this issue)	After 65788a7
iPhone SE 375px	+25.1 px overflow	0 px ✅
iPhone 14 390px	+10.1 px overflow	0 px ✅
iPhone 14 Pro Max 430px	0 px	0 px ✅

All 5 stages (PDF / OCR / CHUNK / EMBED / ENTITY) visible on every viewport — on narrow screens the last stage wraps to a centered second row instead of clipping past the document edge.

After-fix screenshots

iPhone SE 375px — 5 stages fit, Entity wraps to a centered second row:

iPhone 14 390px — same wrap behavior, 0 overflow:

iPhone 14 Pro Max 430px — already 0 before, stays 0:

Closing this one out. 🤝