fix(ui): stop Tabs from wrapping and overflowing its track on mobile

[montycheese]

Problem

On mobile, the B20 demo's tab row renders broken: "Create a token" wraps to three lines and the active white pill spills past the rounded gray track's right edge.

Cause

The Tabs track rendered as inline-flex with no width floor. The B20 demo wraps it in overflow-x-auto, but an inline-flex box shrinks to fit available width rather than overflowing it — so at 390px the flex items got squeezed: labels wrapped, the track grew tall, and the pill (measured from the button's box) landed outside the track.

Fix

• w-max on the track — it takes its natural content width and genuinely overflows, letting the overflow-x-auto parent scroll instead of compressing it.
• shrink-0 whitespace-nowrap on each tab — labels stay on one line, buttons keep their intrinsic width.
• Scroll the selected tab into view in measure() — with the row now scrollable, the active tab could sit off-screen with nothing indicating it. Adjusts scrollLeft on the nearest horizontally-scrollable ancestor; done manually rather than with scrollIntoView, which would also scroll the page vertically.

Testing

Verified at 390x844 on /demos/b20: single-line row, pill inside the track, and selecting "Create a token" scrolls it into view.

Checked the other Tabs consumers at the same width for regressions — /upgrades, /snapshots, and /demos/account all render normally; their tab sets are short enough that they never overflow, so the change is inert there.

/tips also uses Tabs but is internal-only and 404s in the external build, so I could not check it in a browser. Its two tabs ("Blocks", "Rejected Transactions") are wide enough that the same overflow was likely present and should now be fixed the same way — worth a look from someone on an internal build.

npm run typecheck clean, npm test 114/114 pass. Lint shows only pre-existing <img> warnings in unrelated files.

After

Before

[cb-heimdall]

🟡 Heimdall Review Status

Requirement	Status	More Info
Reviews	🟡 0/1	Denominator calculation Show calculation 1 if user is bot 0 1 if user is external 0 2 if repo is sensitive 0 From .codeflow.yml 1 Additional review requirements Show calculation Max 0 0 From CODEOWNERS 0 Global minimum 0 Max 1 1 1 if commit is unverified 0 Sum 1

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
omni-ui	Ready	Preview	Aug 13, 2026 5:42pm