fix(desktop): the tab × draws full size, dim at rest, brightening without a fill
Merged
DA
10d ago+10+10+01234567890123456789-5-5-0123456789
Dean: "make the X icon itself the same size as the other icons and remove the background hover border … have it dim and then change the color of the actual X icon on hover."
What was wrong
Measured in headless Chrome against the built styles.css. The glyph was being squeezed: .tab-close is a 20px <button> that kept Chromium's default padding: 1px 6px. That leaves 8px of content width, and the 15px svg flex-shrank into it. No .icon-button-glyph override was involved: .tab-close svg already wins on specificity. On top of that, CloseIcon's strokes spanned only 6.8–17.2 of the 24 box, while the other glyphs span 14–17.
| Glyph (15px control glyph) | svg box | drawn extent (incl. stroke) | stroke |
|---|---|---|---|
| Tab × before | 8 × 15 | 4.1 × 4.1 | 0.63px |
| Tab × after | 15 × 15 | 9.7 × 9.7 | 1.19px |
| Plan tab icon (document) | 15 × 15 | 9.7 × 11.9 | 1.19px |
| Board tab icon | 15 × 15 | 11.9 × 11.3 | 1.19px |
| ⋯ | 15 × 15 | 10.0 × 1.9 | — (filled) |
| Expand | 15 × 15 | 10.2 × 10.2 | 1.19px |
| Side panel toggle | 15 × 15 | 12.2 × 10.4 | 1.19px |
Change
.tab-close:padding: 0, and its svg isflex: 0 0 auto(same as.toolbar-button svg), so the glyph keeps its full 15px box.CloseIconnow spans 5.2–18.8, the same extent as the other glyphs. Its other call sites both benefit. In the Shortcuts row it swaps withPencilIconinside the same button, so it no longer shrinks mid-edit. The settings-search clear button's × (drawn in a 9px box) grows from about 3.9px to 5.1px inside its 18px circle.- No hover fill or ring:
.tab-close:hoversetscoloronly, and the transition is now oncolorinstead ofbackground-color. At rest the × is--text-tertiary; hovering the × itself brightens just the glyph to--text-primary. The reveal rules are unchanged: it shows on the selected tab and on tab hover, and is hidden on compact inactive tabs. The hit area stays 20×20. - Focus: the × is
tabIndex={-1}(the keyboard closes a tab with Delete on the tab itself), so it never takes keyboard focus. No focus style was removed. - Note: the brief called
--text-tertiary"same as inactive tab icons", but.tab-iconis--text-secondary. I used tertiary because Dean asked for a dim ×.
Evidence (headless Chrome, built renderer CSS, 2×)
Rest / hovering the Board tab / hovering the Plan tab's ×, before and after:

Verification
./scripts/check.shexits 0.- CI could not verify the Mac UI, and
./scripts/verify.shwas not run (Linux cloud VM; LUKE-159 is the manual Mac pass). The crops above are headless Chrome on Linux. - No test was added: this change is CSS and glyph geometry only, and a test asserting either would be a change-detector (AGENTS.md). The evidence is the measurements above.
🤖 Generated with Claude Code