Full mode: Shrink-wrap Ext/Size/Modified columns

- Measure the visible rows via `@chenglou/pretext` to give the name column every spare pixel. Updates continuously on scroll, resize, and as the prefetch buffer fills.
- Animate column width changes with a 300ms `grid-template-columns` ease transition. `prefers-reduced-motion` disables it. Dir switches snap (no animation) so the persistent header doesn't slide.
- Keep the last good widths across the "empty cache" gap after a nav so we don't collapse to header-only widths and snap back out.
- Fold the `..` row's huge recursive size into the measurement only while that row is actually on screen — otherwise the size column stayed oversized as the user scrolled away.
- Hide the sort caret with `display: none` on inactive columns instead of `opacity: 0`, so it no longer reserves 12px on every unsorted header.

Author: vdavid

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

@@ -71,8 +71,9 @@ Props: `file: FileEntry`, `syncIcon?: string` (URL for sync overlay badge).
 Props: `column`, `label`, `currentSortColumn`, `currentSortOrder`, `onClick`, `align?` (`'left'` default, `'right'` for
 numeric columns).
 
-Renders a `<button>` with a sort-direction triangle (▲/▼). Triangle is hidden (opacity 0) when column is not active.
-Handles both `onclick` and `onkeydown` (Enter/Space).
+Renders a `<button>` with a sort-direction triangle (▲/▼). The triangle is `display: none` on inactive columns so it
+doesn't reserve width — `FullList` shrink-wraps column widths and `opacity: 0` would have baked ~12px of dead space into
+every unsorted header. Handles both `onclick` and `onkeydown` (Enter/Space).
 
 ## Key decisions
 

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

@@ -83,6 +83,6 @@
     }
 
     .sort-indicator.invisible {
-        opacity: 0;
+        display: none;
     }
 </style>

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

@@ -14,6 +14,9 @@ without DOM performance issues.
 - **brief-list-utils.ts** / **full-list-utils.ts** – Mode-specific rendering logic. `full-list-utils.ts` includes
   dual-size display helpers: `getDisplaySize()` (picks logical/physical/smart), `hasSizeMismatch()`,
   `buildFileSizeTooltip()`, `buildDirSizeTooltip()`, `buildSelectionSizeTooltip()`
+- **measure-column-widths.ts** – `computeFullListColumnWidths()`: pixel-accurate widths for the Ext / Size / Modified
+  columns based on the currently loaded entries. Uses `@chenglou/pretext` for canvas-based measurement (no DOM reflow).
+  FullList transitions `grid-template-columns` over 300ms so widths refine smoothly as more entries stream in.
 - **FullList.svelte** – Reads `listing.sizeDisplay` (via `getSizeDisplayMode()`) and `listing.sizeMismatchWarning` (via
   `getSizeMismatchWarning()`) settings. Uses UnoCSS/Lucide `i-lucide:circle-alert` for size mismatch warnings and
   `i-lucide:hourglass` for stale index indicators
@@ -68,6 +71,15 @@ window requires fresh data. Parent bumps `cacheGeneration`, triggering re-fetch.
 **Decision**: Icon prefetching only for visible entries **Why**: With 50k files, prefetching all icons = 50k IPC calls.
 Virtual scrolling renders only ~50 items, so prefetch only visible. Re-fetch on scroll.
 
+**Decision**: Shrink-wrap Ext / Size / Modified columns from the rows **currently on screen**, not the prefetch buffer
+or the full directory **Why**: The name column should keep every spare pixel, so columns track live content. Pretext's
+canvas measurement is fast enough to recompute on every scroll row-crossing and window resize. The 300ms
+`grid-template-columns ease` transition (on both `.header-row` and `.file-entry`) smooths the resulting width changes.
+Dir switches snap instead of animating (see Gotcha below). The `..` row's (often huge) recursive size only contributes
+when that row is actually on screen — otherwise the size column would stay oversized after scrolling past it.
+`SelectionInfo` keeps using `measureDateColumnWidth` (worst-case sampling) because it renders a single-entry snapshot
+with no "visible set" to measure from.
+
 ## Gotchas
 
 **Gotcha**: `$state()` cannot live in `.ts` files **Why**: `virtual-scroll.ts` is pure functions. Reactive state must be
@@ -92,3 +104,16 @@ layout recalc. `transform` uses GPU compositor for 60fps.
 **Gotcha**: Cache re-fetch during scroll uses range expansion **Why**: If visible range is [100, 150] but cached is [0,
 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**: FullList's `grid-template-columns` transition would "slide" the header on dir switches, because the header
+lives outside the virtual scroll and persists across navs **Why**: When `shouldResetCache` fires, a `skipTransition`
+flag is set and cleared after two `requestAnimationFrame` ticks (one to paint with `transition: none`, one more before
+re-enabling). Widths also don't update while `cachedEntries` is empty AND `parentDirStats` is null, so the brief
+post-nav gap doesn't collapse them to header-only floors. Combined, nav = snap; within-dir scroll/resize/stream-in =
+animated.

apps/desktop/src/lib/file-explorer/views/FullList.svelte

@@ -24,14 +24,14 @@
     import {
         getVisibleItemsCount as getVisibleItemsCountUtil,
         getVirtualizationBufferRows,
-        measureDateColumnWidth,
         buildDirSizeTooltip,
         buildFileSizeTooltip,
         getDisplaySize,
         hasSizeMismatch,
         getDisplayExtension,
         getDisplayName,
     } from './full-list-utils'
+    import { computeFullListColumnWidths } from './measure-column-widths'
     import {
         getRowHeight,
         getIsCompactDensity,
@@ -123,10 +123,6 @@
     // UI density for compact mode detection (uses reactive state from reactive-settings)
     const isCompact = $derived(getIsCompactDensity())
 
-    // Dynamic date column width based on measured text width using the actual font.
-    // Measures multiple sample dates to find the maximum width needed.
-    const dateColumnWidth = $derived(measureDateColumnWidth(formatDateTime))
-
     // Size display mode (smart/logical/physical)
     const sizeDisplayMode = $derived(getSizeDisplayMode())
 
@@ -139,6 +135,14 @@
     // Drive index state — show spinner while scanning OR aggregating (sizes aren't ready until aggregation finishes)
     const indexing = $derived(isScanning() || isAggregating())
 
+    // Column widths are declared after the virtual window, which gates parent-row inclusion.
+    let columnWidths = $state({ ext: 60, size: 115, date: 80 })
+    let skipTransition = $state(false)
+
+    const gridTemplate = $derived(
+        `16px 1fr ${String(columnWidths.ext)}px ${String(columnWidths.size)}px ${String(columnWidths.date)}px`,
+    )
+
     // ==== Virtual scrolling state ====
     let scrollContainer: HTMLDivElement | undefined = $state()
     let containerHeight = $state(0)
@@ -156,6 +160,52 @@
         }),
     )
 
+    // Shrink-wrapped column widths, measured strictly from the rows currently on
+    // screen so the name column keeps every spare pixel. Widths refresh smoothly
+    // (300ms CSS transition) as the user scrolls, resizes the window, or when new
+    // entries stream into the prefetch buffer.
+    //
+    // Held across the "empty cache" window right after a dir switch so we don't
+    // collapse to header-only widths and then snap outward again — `skipTransition`
+    // handles the actual nav by suppressing the CSS transition for one paint.
+    //
+    // The ".." row's (often huge) recursive size only factors in when that row is
+    // actually on screen — otherwise the size column stays oversized after scrolling.
+    const firstVisibleGlobalIndex = $derived(rowHeight > 0 ? Math.floor(scrollTop / rowHeight) : 0)
+    const lastVisibleGlobalIndex = $derived(
+        rowHeight > 0 && containerHeight > 0
+            ? Math.min(totalCount - 1, Math.floor((scrollTop + containerHeight - 1) / rowHeight))
+            : -1,
+    )
+    const isParentRowVisible = $derived(hasParent && firstVisibleGlobalIndex === 0)
+
+    $effect(() => {
+        const first = firstVisibleGlobalIndex
+        const last = lastVisibleGlobalIndex
+        const parentOffset = hasParent ? 1 : 0
+        const firstBackend = Math.max(0, first - parentOffset)
+        const lastBackend = last - parentOffset
+
+        const visible: FileEntry[] = []
+        for (let i = firstBackend; i <= lastBackend; i++) {
+            if (i >= cachedRange.start && i < cachedRange.end) {
+                visible.push(cachedEntries[i - cachedRange.start])
+            }
+        }
+
+        const parentStats = isParentRowVisible ? parentDirStats : null
+        if (visible.length === 0 && !parentStats) return
+        columnWidths = computeFullListColumnWidths({
+            entries: visible,
+            parentDirStats: parentStats,
+            formatDateTime,
+            sizeDisplayMode,
+            indexing,
+            showSizeMismatchWarning,
+            sortBy,
+        })
+    })
+
     // Get entry at global index (handling ".." entry)
     export function getEntryAt(globalIndex: number): FileEntry | undefined {
         return getEntryAtUtil(
@@ -361,6 +411,15 @@
             cachedEntries = []
             cachedRange = { start: 0, end: 0 }
             prevCacheProps = currentProps
+            // Suppress the grid-template-columns transition for the first paint after
+            // a dir switch — otherwise the header (which persists across navs) slides
+            // from the previous dir's widths to the new ones.
+            skipTransition = true
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    skipTransition = false
+                })
+            })
         }
 
         void fetchVisibleRange()
@@ -410,9 +469,10 @@
     <!-- Header row with sortable columns (outside scroll container for correct height calculation) -->
     <div
         class="header-row"
+        class:no-transition={skipTransition}
         role="toolbar"
         aria-label="Sort columns"
-        style="grid-template-columns: 16px 1fr 60px 115px {dateColumnWidth}px;"
+        style="grid-template-columns: {gridTemplate};"
     >
         <span class="header-icon"></span>
         <SortableHeader
@@ -475,9 +535,10 @@
                         class:is-under-cursor={globalIndex === cursorIndex}
                         class:is-selected={selectedIndices.has(globalIndex)}
                         class:is-striped={stripedRows && globalIndex % 2 === 1}
+                        class:no-transition={skipTransition}
                         data-filename={file.name}
                         data-drop-target-path={file.isDirectory ? file.path : undefined}
-                        style="height: {rowHeight}px; grid-template-columns: 16px 1fr 60px 115px {dateColumnWidth}px;"
+                        style="height: {rowHeight}px; grid-template-columns: {gridTemplate};"
                         onmousedown={(e: MouseEvent) => {
                             handleMouseDown(e, globalIndex)
                         }}
@@ -607,13 +668,14 @@
 
     .header-row {
         display: grid;
-        /* grid-template-columns set via inline style for dynamic date column width */
+        /* grid-template-columns set via inline style for shrink-wrapped column widths */
         gap: var(--spacing-sm);
         padding: var(--spacing-xxs) var(--spacing-sm);
         background: var(--color-bg-header);
         border-bottom: 1px solid var(--color-border);
         height: 22px;
         flex-shrink: 0;
+        transition: grid-template-columns 300ms ease;
     }
 
     .header-icon {
@@ -636,6 +698,19 @@
         align-items: center;
         /* Guarantee one visual line per row regardless of cell content length */
         white-space: nowrap;
+        transition: grid-template-columns 300ms ease;
+    }
+
+    .header-row.no-transition,
+    .file-entry.no-transition {
+        transition: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .header-row,
+        .file-entry {
+            transition: none;
+        }
     }
 
     /* In compact mode, use symmetric padding to match BriefList alignment */

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

@@ -0,0 +1,142 @@
+/**
+ * Tests for measure-column-widths.ts. We replace the real pretext-backed measurer
+ * with a deterministic `text.length * 7` stand-in so assertions stay readable.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+
+import type { FileEntry } from '../types'
+
+import { _setMeasureForTests, computeFullListColumnWidths } from './measure-column-widths'
+
+const fakeMeasure = (text: string): number => text.length * 7
+
+function entry(overrides: Partial<FileEntry>): FileEntry {
+  return {
+    name: 'file.txt',
+    path: '/x/file.txt',
+    isDirectory: false,
+    isSymlink: false,
+    size: 0,
+    physicalSize: 0,
+    modifiedAt: undefined,
+    permissions: 0o644,
+    owner: 'u',
+    group: 'g',
+    iconId: 'text',
+    extendedMetadataLoaded: false,
+    ...overrides,
+  }
+}
+
+const baseArgs = {
+  parentDirStats: null,
+  formatDateTime: (t: number) => new Date(t * 1000).toISOString().slice(0, 19).replace('T', ' '),
+  sizeDisplayMode: 'smart' as const,
+  indexing: false,
+  showSizeMismatchWarning: false,
+  sortBy: 'name' as const,
+}
+
+describe('computeFullListColumnWidths', () => {
+  afterEach(() => {
+    _setMeasureForTests(null)
+  })
+
+  it('falls back to header-only widths when entries is empty', () => {
+    _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)
+    expect(w.size).toBe(40)
+    expect(w.date).toBe(70)
+  })
+
+  it('widens the active sort column to reserve room for the caret', () => {
+    _setMeasureForTests(fakeMeasure)
+    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)
+  })
+
+  it('widens size column when a large file is present', () => {
+    _setMeasureForTests(fakeMeasure)
+    const small = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'a.txt', size: 0, physicalSize: 0 })],
+    })
+    const big = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'z.bin', size: 100_000_000, physicalSize: 100_000_000 })],
+    })
+    expect(big.size).toBeGreaterThan(small.size)
+  })
+
+  it('widens ext column based on actual extensions', () => {
+    _setMeasureForTests(fakeMeasure)
+    const short = computeFullListColumnWidths({ ...baseArgs, entries: [entry({ name: 'a.js' })] })
+    const long = computeFullListColumnWidths({ ...baseArgs, entries: [entry({ name: 'a.verylongext' })] })
+    expect(long.ext).toBeGreaterThan(short.ext)
+  })
+
+  it('widens date column based on longest formatted date', () => {
+    _setMeasureForTests(fakeMeasure)
+    const short = computeFullListColumnWidths({
+      ...baseArgs,
+      formatDateTime: () => 'today',
+      entries: [entry({ name: 'a', modifiedAt: 1 })],
+    })
+    const long = computeFullListColumnWidths({
+      ...baseArgs,
+      formatDateTime: () => '2026-12-31 23:59:59',
+      entries: [entry({ name: 'a', modifiedAt: 1 })],
+    })
+    expect(long.date).toBeGreaterThan(short.date)
+  })
+
+  it('reserves icon width when a directory has a stale size during indexing', () => {
+    _setMeasureForTests(fakeMeasure)
+    const idle = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'd', isDirectory: true, recursiveSize: 12345 })],
+    })
+    const busy = computeFullListColumnWidths({
+      ...baseArgs,
+      indexing: true,
+      entries: [entry({ name: 'd', isDirectory: true, recursiveSize: 12345 })],
+    })
+    expect(busy.size).toBeGreaterThanOrEqual(idle.size)
+  })
+
+  it('includes parentDirStats size when provided', () => {
+    _setMeasureForTests(fakeMeasure)
+    const without = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'a', size: 1 })],
+    })
+    const withParent = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'a', size: 1 })],
+      parentDirStats: {
+        path: '/x',
+        recursiveSize: 999_999_999_999,
+        recursivePhysicalSize: 999_999_999_999,
+        recursiveFileCount: 1,
+        recursiveDirCount: 0,
+      },
+    })
+    expect(withParent.size).toBeGreaterThan(without.size)
+  })
+
+  it('never returns widths below the floor', () => {
+    _setMeasureForTests(() => 0) // pathological: everything measures to zero
+    const w = computeFullListColumnWidths({ ...baseArgs, entries: [entry({ name: 'a' })] })
+    expect(w.ext).toBeGreaterThanOrEqual(28)
+    expect(w.size).toBeGreaterThanOrEqual(40)
+    expect(w.date).toBeGreaterThanOrEqual(70)
+  })
+})