The fixed 120px/96px caps on the two wrapped layouts were row counts in disguise: a third row was clipped into a ~4px scroller, hiding tabs inside a container nothing invites you to scroll, while the header had the page below it to grow into. Both layouts now share one rule capped at var(--tab-strip-max-height, 40vh), a safety net for an absurd session count rather than a row limit. Verified before shipping: .header is min-height + flex-shrink: 0 so it can grow, and terminal-ui's ResizeObserver refits the terminal when it does; updateTabOverflowMode() returns early for any non-desktop viewport, and below 1024px mobile.css pins the header to max-height: 48px, so this is desktop-only in effect; the selector is comma-grouped rather than :is(), so each arm keeps (0,2,0) and mobile.css's overrides still win on source order. PostCSS parses the file cleanly (prettier ignores styles.css). Authored in a parallel session against this shared checkout. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1.4 KiB
aicodeman
| aicodeman |
|---|
| patch |
fix(tabs): let a wrapped desktop tab strip grow the header instead of clipping itself
The wrapped tab strip carried fixed height caps (120px for the manual two-row layout,
96px for measured auto-wrap) that were row counts in disguise. A third row of tabs was
clipped into a roughly 4px scroller, so the tab being looked for sat off-screen inside a
container nothing invites you to scroll, while the header had the whole page below it to
grow into. The header is min-height plus flex-shrink: 0, and terminal-ui's
ResizeObserver refits the terminal on its own, so growing it costs nothing.
Both wrapped layouts now share one rule capped at var(--tab-strip-max-height, 40vh).
That cap is a safety net for an absurd session count rather than a row limit: past it the
scroller comes back, which still beats a header that swallows the terminal. Nothing sets
--tab-strip-max-height yet, so today it is the 40vh fallback plus a hook for a future
control.
Desktop only in effect. tabs-auto-wrap is applied by updateTabOverflowMode(), which
returns early for anything that is not a desktop viewport, and below 1024px mobile.css
pins the header to max-height: 48px so it cannot grow at all. The two rules are
comma-grouped rather than wrapped in :is(), so each arm keeps its own (0,2,0)
specificity and mobile.css's matching overrides still win on source order.