From 708cb2cbf013ed77058028e526a10de6ddc52268 Mon Sep 17 00:00:00 2001 From: Codeman maintainer Date: Mon, 14 Sep 2026 13:08:34 +0200 Subject: [PATCH] fix(tabs): let a wrapped desktop tab strip grow the header instead of clipping itself 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) --- .changeset/d3c38a94.md | 24 ++++++++++++++++++++++++ src/web/public/styles.css | 19 +++++++++++-------- 2 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 .changeset/d3c38a94.md diff --git a/.changeset/d3c38a94.md b/.changeset/d3c38a94.md new file mode 100644 index 00000000..b767bf14 --- /dev/null +++ b/.changeset/d3c38a94.md @@ -0,0 +1,24 @@ +--- +"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. diff --git a/src/web/public/styles.css b/src/web/public/styles.css index 012c8598..49b26810 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -545,18 +545,21 @@ body { contain: layout; } -.session-tabs.tabs-two-rows { - flex-wrap: wrap; - overflow-x: hidden; - overflow-y: auto; - max-height: 120px; -} - +/* A wrapped strip GROWS the header instead of scrolling inside it. The old + fixed caps (120px tall-tabs / 96px auto-wrap) were row counts in disguise: + a third row of tabs was clipped into a 4px scroller, so the tabs you were + looking for were off-screen in a container nothing tells you to scroll — + while the header had the whole page below it to grow into (it is + `min-height` + `flex-shrink: 0`, and terminal-ui's ResizeObserver refits + the terminal on its own). `--tab-strip-max-height` is a safety net for an + absurd session count, not a row limit: past it the scroller comes back, + which beats a header that swallows the terminal. */ +.session-tabs.tabs-two-rows, .session-tabs.tabs-auto-wrap { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; - max-height: 96px; + max-height: var(--tab-strip-max-height, 40vh); } .session-tabs::-webkit-scrollbar {