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 {