The tab strip was a hand-rolled lookalike: bg-accent for the active tab and
an absolutely-positioned bg-primary underline, competing with a tab
component 7.css already ships. Replaced with its actual contract —
menu[role=tablist] plus one button[role=tab][aria-selected] per workspace —
so 7.css draws the joined inactive tabs and the raised white active one.
Per the agreed design the per-tab X is gone: real Win7 tab controls had
none, and a button nested in a button is invalid HTML. Closing keeps
Ctrl/Cmd+W and gains middle-click (auxclick, guarded on button 1 so the
right button never closes a tab). Drag-reorder moved onto the tab button
itself and still works.
Three things 7.css does that had to be accommodated, each found by looking
rather than by reasoning:
- Its selector is the DESCENDANT `menu[role=tablist] button`, so the +,
update pill and right-hand tools deliberately stay outside the menu.
- The strip is a .w7-toolbar, whose neutralizer strips background, border
and both pseudo-elements to make toolbar buttons flat. That flattened the
tabs to nothing, so the rule now exempts :not([role=tab]) — tabs want the
full Aero slab, their neighbours want flat.
- overflow-x:auto on the scroller forces computed overflow-y from visible
to auto, so the strip clips vertically. 7.css raises the active tab with
margin-top:-2px, which put its top border outside the scroll box and
silently deleted it. The strip now reserves 2px of padding-top, mirroring
the padding-left:3px 7.css already reserves for the same tab's -3px left
margin. Caught by pixel-scanning the tab's top edge against 7.css's own
reference markup in the harness: reference had #8e8f8f, ours jumped
straight from toolbar grey to tab fill.
Also: tabs.css hardcodes color:#222 on every tablist button, outside 7.css's
var system, leaving labels near-invisible in dark. Routed through a new
--w7-tab-c token declared light in :root.win7 and overridden in BOTH dark
blocks (attribute and prefers-color-scheme), matching the ListView and menu
literals. And its `display: block` outranks Tailwind's .flex, which jammed
the icon against the label — flex/gap restored in skinfix.
role="tabpanel" on the panel area was considered and skipped: 7.css gives it
padding:14px, margin-bottom:9px and its own border, which would fight the
split-pane layout for a join that cannot read anyway with the panel toolbar
row in between.
The harness grew a section 5 mirroring this markup, because the live app
starts with exactly one workspace and there is no way to click "+" from a
headless capture — multi-tab state is only checkable there. Verified in
both themes headless and on a live window capture.
Co-Authored-By: Claude <noreply@anthropic.com>
jgamboaandClaude
aaa12c3e23