File list: Align Full mode header labels with data cells

`SortableHeader`'s 4px horizontal padding stays for hover-state breathing room, but an equal negative margin pulls each button back out of its column track. Result: header labels line up with the data cells beneath them, and hover backgrounds reach 4px into the inter-column gap on each side.

`HEADER_CHROME_ACTIVE` drops from 20 → 12 (gap + caret only) and `HEADER_CHROME_INACTIVE` from 8 → 0, since the padding now sits outside the track. Tests and the colocated gotcha note updated to match.

Author: vdavid

apps/desktop/src/lib/file-explorer/selection/SortableHeader.svelte

@@ -47,6 +47,11 @@
         align-items: center;
         gap: var(--spacing-xs);
         padding: 0 var(--spacing-xs);
+        /* Negative horizontal margin pulls the button 4px outside the column
+           track on each side. Combined with the 4px internal padding, the
+           label still lines up with the data cells below, while the hover
+           background gets breathing room and adjacent buttons sit closer. */
+        margin: 0 calc(-1 * var(--spacing-xs));
         background: transparent;
         border: none;
         font: inherit;

apps/desktop/src/lib/file-explorer/views/CLAUDE.md

@@ -122,11 +122,13 @@ layout recalc. `transform` uses GPU compositor for 60fps.
 200], don't re-fetch. If scrolled to [250, 300], expand fetch to [0, 550] to include buffer. `shouldResetCache()`
 handles this.
 
-**Gotcha**: `HEADER_CHROME_ACTIVE/INACTIVE` in `measure-column-widths.ts` are tied to `SortableHeader`'s padding + flex
-gap + caret glyph (`--spacing-xs` = 4px × 3 + 8px caret = 20px active, 4px × 2 = 8px inactive) **Why**: If you change
-those CSS values or the caret size/markup, update the two constants or column widths drift. The values aren't derived
-from the live DOM because pretext measurement runs without a reference element — everything is computed from the
-pre-known chrome formula.
+**Gotcha**: `HEADER_CHROME_ACTIVE/INACTIVE` in `measure-column-widths.ts` are tied to `SortableHeader`'s flex gap +
+caret glyph (4px gap + 8px caret = 12px active, 0px inactive). The button keeps 4px horizontal padding for hover-state
+breathing room, but an equal negative margin (`margin: 0 calc(-1 * var(--spacing-xs))`) pulls it back out so the label
+still lines up with the data cells below — only gap+caret count toward the track width. **Why**: If you change those CSS
+values or the caret size/markup, update the two constants or column widths drift. The values aren't derived from the
+live DOM because pretext measurement runs without a reference element — everything is computed from the pre-known chrome
+formula.
 
 **Gotcha**: Width transitions would "slide" on dir switches, because the header (FullList) and columns (BriefList)
 persist across navs **Why**: When `shouldResetCache` fires, both lists set a `skipTransition` flag and clear it after

apps/desktop/src/lib/file-explorer/views/measure-column-widths.test.ts

@@ -47,21 +47,23 @@ describe('computeFullListColumnWidths', () => {
     _setMeasureForTests(fakeMeasure)
     const w = computeFullListColumnWidths({ ...baseArgs, entries: [] })
     // With sortBy='name', none of Ext/Size/Modified are active, so each gets
-    // HEADER_CHROME_INACTIVE (8). "Ext" = 21 + 8 = 29; "Size" = 28 + 8 = 36
-    // → clamped to MIN_SIZE_WIDTH (40); "Modified" = 56 + 8 = 64 → clamped to
-    // MIN_DATE_WIDTH (70).
-    expect(w.ext).toBe(29)
+    // HEADER_CHROME_INACTIVE (0 — labels sit flush with column-track edges).
+    // "Ext" = 21 → clamped to MIN_EXT_WIDTH (28); "Size" = 28 → clamped to
+    // MIN_SIZE_WIDTH (40); "Modified" = 56 → clamped to MIN_DATE_WIDTH (70).
+    expect(w.ext).toBe(28)
     expect(w.size).toBe(40)
     expect(w.date).toBe(70)
   })
 
   it('widens the active sort column to reserve room for the caret', () => {
     _setMeasureForTests(fakeMeasure)
+    // The ext column is the one whose floor (MIN_EXT_WIDTH = 28) sits below
+    // "Ext" + active chrome (21 + 12 = 33), so the caret allowance is visible.
+    // Size and Date floors swallow the caret allowance whole, so we test ext.
     const nameSorted = computeFullListColumnWidths({ ...baseArgs, entries: [] })
-    const sizeSorted = computeFullListColumnWidths({ ...baseArgs, entries: [], sortBy: 'size' })
-    // size col picks up the caret (+12 chrome) when sortBy==='size'; ext stays inactive.
-    expect(sizeSorted.size).toBeGreaterThan(nameSorted.size)
-    expect(sizeSorted.ext).toBe(nameSorted.ext)
+    const extSorted = computeFullListColumnWidths({ ...baseArgs, entries: [], sortBy: 'extension' })
+    expect(extSorted.ext).toBeGreaterThan(nameSorted.ext)
+    expect(extSorted.size).toBe(nameSorted.size)
   })
 
   it('widens size column when a large file is present', () => {

apps/desktop/src/lib/file-explorer/views/measure-column-widths.ts

@@ -33,15 +33,19 @@ const FONT = '12px -apple-system, BlinkMacSystemFont, sans-serif'
 
 /**
  * Header overhead inside `SortableHeader` for the column currently being sorted:
- * 4px padding left + 4px padding right + 4px flex gap + 8px caret.
+ * 4px flex gap + 8px caret. The button's 4px horizontal padding is canceled
+ * by an equal negative horizontal margin, so the label lines up with the data
+ * cells below — only the gap+caret count toward the column track width.
  */
-const HEADER_CHROME_ACTIVE = 20
+const HEADER_CHROME_ACTIVE = 12
 
 /**
- * Header overhead for a column that isn't being sorted: the caret is `display: none`,
- * which collapses both the glyph and the flex gap. Only the button's own padding remains.
+ * Header overhead for a column that isn't being sorted: the caret is
+ * `display: none`, which collapses both the glyph and the flex gap. The
+ * button's padding is offset by the negative margin, so the label is flush
+ * against the track edges and chrome is zero.
  */
-const HEADER_CHROME_INACTIVE = 8
+const HEADER_CHROME_INACTIVE = 0
 
 /** Extra px added to the final column width. Zero by design — `Math.ceil` already
  *  rounds up, and the pretext measurement matches the browser's own text layout. */