fix(homepage): stop the CTA rows and MCP card overflowing their containers

[QSchlegel]

Three overflows on the landing page. All of them were invisible as scrollbars, because in every case an ancestor clipped the overflow instead of scrolling it — so content was silently lost rather than reachable.

The MCP card was losing its text on mobile

A grid item defaults to min-width: auto, which means it refuses to shrink below the min-content width of what's inside it. Inside this one is the JSON config block, min-content 482px. On a 375px phone that forced the single column to 395px inside a 261px card, and the card's overflow-hidden clipped the difference — the heading read "Connect any AI agen", and every paragraph lost its right-hand edge. No scrollbar, no clue anything was missing.

min-w-0 down the chain fixes it. The <pre> already had overflow-x-auto; it just never got the chance to use it, because the whole ancestor chain inflated instead. With the min-width floor removed the column drops to 261px, card scrollWidth equals clientWidth, and the config block scrolls by itself.

Two button rows ran off sideways

Both are a third CTA added to a nowrap row that used to hold two:

• Hero — three buttons need 747px; the container is 673px below ~780px, so they spilled 37px past each edge.
• MCP section — the row turns horizontal at sm (640px), but the grid column it lives in halves at md (768px). Between those breakpoints two buttons totalling 397px sat in a 280px column and ran straight into the panel alongside. That's the overlap in the report.

flex-wrap self-corrects at every width rather than trading one breakpoint for another. The hero also switches to items-start: its first CTA carries a subtitle underneath, so centring floated the other two off its axis once the row wrapped.

Verification

Measured container spill at 375 / 640 / 768 / 900 / 1024 / 1280:

	before	after
MCP row	118px	0
Hero row	74px	0
MCP card content lost	110px	0

Both rows still render on a single line at desktop, so the wrap costs nothing where it already fitted. A sweep of the fully mounted page (13938px) found no other element losing content to a clipping ancestor — the only remaining hits are truncate ellipses, sr-only, and the decorative background layers, all intentional.

tsc clean (the 5 pre-existing txScriptRecovery.test.ts errors are on preprod too).

One thing left alone: at 375px the hero's primary button is 339px against a 311px padded row, so it sits ~18px from each screen edge. It is not clipped and overlaps nothing — it is just a long label ("Get Started with Multisig using UTXOS") on a narrow screen. Making mobile CTAs full-width would fix it, but that is a design call rather than a bug fix.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
multisig	Ready	Preview	Aug 13, 2026 12:32pm