fix(studio): stop the chrome bars overlapping on phone viewports

[w1ne]

The bug

On a phone, the Studio chrome bars pile controls on top of each other: the privacy button, revision-history icon, the ● live badge and Share all paint over one another in the Header, and Run sits half off the right edge of the Toolbar.

Root cause: the Header's left group had min-w-0 with no clip, so it was squeezed below its content width and its shrink-0 children (project title, live badge) spilled out of their box and over the right-hand cluster. .bar-scroll-x was meant to catch this by scrolling, but an overflowing child never engages it — and its scrollbar is hidden, so the Toolbar's Run just looked cut off.

The fix

• Header — clip the left group (overflow-hidden) so nothing can paint over the right cluster, and below lg collapse the instruments (display mode, background, ground grid, undo/redo, revision history, STEP/STL export) into one labelled overflow menu. lg rather than md because the full inline set measurably only fits from ~1024px up, so tablets were affected too.
• Toolbar — below md, Validate and Run stay on the bar; Agent, Connect, My Designs, Publish & Share, Brush, Section, Reference, Env and Inspector move into a matching overflow menu.
• New OverflowMenu — renders its panel through a portal, since both bars are overflow-x:auto containers that would otherwise clip a dropdown to the 32–40px bar height (the same reason UserMenu already portals). Closes on outside click, Escape, or a second press of the trigger.
• New useIsNarrow — useSyncExternalStore over matchMedia, so there's no set-state-in-effect and no first-paint flash of the desktop layout. Falls back to desktop when matchMedia is absent (SSR / happy-dom).
• /p/:slug header chrome — icon-only privacy toggle and a dot-only live badge below md; the title truncates to nothing (and drops out under 400px) rather than pushing the badge under the clip.
• Bar padding tightens from px-4/px-3 to px-2 on phones.

Verification

A probe intersecting every visible control rect in both bars, run in Chromium against /p/:slug with stubbed project data, at 360 / 412 / 768 / 900 / 1024 / 1440px:

• zero overlapping control pairs at every width
• scrollWidth === clientWidth in both bars at every width (nothing pushed off-screen)

Before the fix the same probe reported the live badge overlapping the history control by 20px and Share by 28px at 412px, and 6 overlapping pairs at 768px.

Also: 8 new unit tests covering the collapse behaviour in both bars (Header.mobile.test.tsx, Toolbar.mobile.test.tsx), plus the full src/studio suite (632 tests), npm run lint and npm run typecheck all passing.

Note

On the phone header the project title is the element that gives way — it truncates and disappears entirely under 400px. The alternative was dropping the live badge instead; that's a one-line flip if preferred.

🤖 Generated with Claude Code

https://claude.ai/code/session_013tihNjUS55tgWpb6Cv7trZ

---

Generated by Claude Code