fix(desktop): the tab × draws full size, dim at rest, brightening without a fill

Merged
DA
10d ago
+10-5

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 boxdrawn extent (incl. stroke)stroke
Tab × before8 × 154.1 × 4.10.63px
Tab × after15 × 159.7 × 9.71.19px
Plan tab icon (document)15 × 159.7 × 11.91.19px
Board tab icon15 × 1511.9 × 11.31.19px
⋯15 × 1510.0 × 1.9— (filled)
Expand15 × 1510.2 × 10.21.19px
Side panel toggle15 × 1512.2 × 10.41.19px

Change

  • .tab-close: padding: 0, and its svg is flex: 0 0 auto (same as .toolbar-button svg), so the glyph keeps its full 15px box.
  • CloseIcon now spans 5.2–18.8, the same extent as the other glyphs. Its other call sites both benefit. In the Shortcuts row it swaps with PencilIcon inside 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:hover sets color only, and the transition is now on color instead of background-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-icon is --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:

compare

Verification

  • ./scripts/check.sh exits 0.
  • CI could not verify the Mac UI, and ./scripts/verify.sh was 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


Open workspace in Conductor


Devin Review