BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-09-30 12:39:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): let a wrapped desktop tab strip grow the header instead of clipping itself

Browse Source 
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>
This commit is contained in:
Codeman maintainer
2026-09-14 13:08:57 +02:00
parent 90ac13da1a
commit 708cb2cbf0
2 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/d3c38a94.md
+24
View File
@@ -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.
src/web/public/styles.css
+11 -8
View File
@@ -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 {