File list: Cap Ext column width on long extensions

- Clamp per-row Ext text width at `measure('extensionxx')` so a pathological extension can't push the rest of the row off-screen. Cap is measured via pretext, so it scales with font.
- `.col-ext` now uses `useShortenMiddle` for middle ellipsis on overflow, with a tooltip showing the full extension only when truncated.
- New `tooltipWhenTruncated` option on `useShortenMiddle` (default false; existing callers unchanged).
- Note in `docs/architecture.md` that frontend text measurement always uses `@chenglou/pretext` (distinct from the Rust-bound `font-metrics/` per-char module).

Author: vdavid

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

@@ -50,6 +50,7 @@
     } from '$lib/settings/reactive-settings.svelte'
     import { iconCacheCleared } from '$lib/icon-cache'
     import { tooltip } from '$lib/tooltip/tooltip'
+    import { useShortenMiddle } from '$lib/utils/shorten-middle-action'
     import type { RenameState } from '../rename/rename-state.svelte'
 
     interface Props {
@@ -690,7 +691,13 @@
                                     {status ? glyphFor(status) : ''}
                                 </span>
                             {/if}
-                            <span class="col-ext">{getDisplayExtension(file.name, file.isDirectory)}</span>
+                            <span
+                                class="col-ext"
+                                use:useShortenMiddle={{
+                                    text: getDisplayExtension(file.name, file.isDirectory),
+                                    tooltipWhenTruncated: true,
+                                }}
+                            ></span>
                         {/if}
                         <span
                             class="col-size"

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

@@ -84,6 +84,23 @@ describe('computeFullListColumnWidths', () => {
     expect(long.ext).toBeGreaterThan(short.ext)
   })
 
+  it('caps the ext column so a pathological extension cannot dominate the row', () => {
+    _setMeasureForTests(fakeMeasure)
+    const longExt = 'extension-extension-extension-extension-extension'
+    // Cap sample is "extensionxx" (11 chars × 7 = 77 px) — text only, no chrome.
+    const capped = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: `a.${longExt}` })],
+    })
+    expect(capped.ext).toBe('extensionxx'.length * 7)
+    // And: the cap doesn't shrink columns below what real shorter extensions deserve.
+    const normal = computeFullListColumnWidths({
+      ...baseArgs,
+      entries: [entry({ name: 'a.js' })],
+    })
+    expect(capped.ext).toBeGreaterThan(normal.ext)
+  })
+
   it('widens date column based on longest formatted date', () => {
     _setMeasureForTests(fakeMeasure)
     const short = computeFullListColumnWidths({

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

@@ -55,6 +55,17 @@ const MIN_EXT_WIDTH = 28
 const MIN_SIZE_WIDTH = 40
 const MIN_DATE_WIDTH = 70
 
+/**
+ * Cap-width sample for the Ext column. A pathological extension like
+ * `extension-extension-extension-…` would otherwise stretch the column wide
+ * enough to push the rest of the row off-screen. The sample is measured with
+ * pretext at the current font, so the cap scales with font size/family.
+ * `extensionxx` ≈ 11 chars — generous enough for real-world long extensions
+ * (`controller`, `component`) without truncating, and just over the literal
+ * word "extension" so that word itself never gets clipped.
+ */
+const EXT_CAP_SAMPLE = 'extensionxx'
+
 let measureWidthCached: ((text: string) => number) | null = null
 let measureUnavailable = false
 
@@ -168,14 +179,20 @@ export function computeFullListColumnWidths(args: {
   let sizeMax = measure('Size') + chromeFor('size')
   let dateMax = measure('Modified') + chromeFor('modified')
 
+  // Cap on per-row Ext text width so a single pathological extension can't
+  // push the rest of the row off-screen. Compared against the row's text-only
+  // measurement (no chrome), so the header bound — `measure('Ext') + chrome` —
+  // can still win when no real extension is wider.
+  const extCap = measure(EXT_CAP_SAMPLE)
+
   // Per-row icons in the size column live to the right of the text; count the
   // widest icon suffix we've seen so we can add it to the data width.
   let sizeIconSuffixMax = 0
 
   for (const entry of entries) {
     const ext = getDisplayExtension(entry.name, entry.isDirectory)
     if (ext) {
-      const w = measure(ext)
+      const w = Math.min(measure(ext), extCap)
       if (w > extMax) extMax = w
     }
 

apps/desktop/src/lib/utils/shorten-middle-action.ts

@@ -5,6 +5,12 @@ export interface ShortenMiddleParams {
   text: string
   preferBreakAt?: string
   startRatio?: number
+  /**
+   * When true, the native `title` tooltip is set only when truncation actually
+   * happened (so short, fully-visible text doesn't trigger a redundant tooltip).
+   * Defaults to false — previous callers always show the full text on hover.
+   */
+  tooltipWhenTruncated?: boolean
 }
 
 // Shared across all action instances so the dynamic import runs at most once.
@@ -41,7 +47,16 @@ export function useShortenMiddle(node: HTMLElement, params: ShortenMiddleParams)
   node.style.textOverflow = 'ellipsis'
   node.style.whiteSpace = 'nowrap'
   node.textContent = params.text
-  node.title = params.text
+  if (!params.tooltipWhenTruncated) node.title = params.text
+
+  function applyTitle(truncated: boolean): void {
+    if (params.tooltipWhenTruncated) {
+      if (truncated) node.title = currentText
+      else node.removeAttribute('title')
+    } else {
+      node.title = currentText
+    }
+  }
 
   function truncate() {
     if (!measureWidth) return
@@ -52,6 +67,7 @@ export function useShortenMiddle(node: HTMLElement, params: ShortenMiddleParams)
       startRatio: params.startRatio,
     })
     node.textContent = result
+    applyTitle(result !== currentText)
   }
 
   // Load pretext, then switch from CSS fallback to pixel-accurate truncation
@@ -76,11 +92,12 @@ export function useShortenMiddle(node: HTMLElement, params: ShortenMiddleParams)
       params = newParams
       if (!textChanged) return
       currentText = newParams.text
-      node.title = currentText
       if (measureWidth) {
         truncate()
       } else {
         node.textContent = currentText
+        if (!params.tooltipWhenTruncated) node.title = currentText
+        else node.removeAttribute('title')
       }
     },
     destroy() {

docs/architecture.md

@@ -36,6 +36,13 @@ All under `apps/desktop/src/lib/`.
 | `utils/`                    | Filename validation, confirm dialog utilities                                                                                                                                                                                                                                                                         |
 | `font-metrics/`             | Character width measurement for accurate Brief mode column sizing                                                                                                                                                                                                                                                     |
 
+**Frontend text measurement always uses `@chenglou/pretext`.** When the frontend needs to know the pixel width of a
+string (column shrink-wrapping, middle-truncation, viewer line heights, etc.), call
+`createPretextMeasure(font, pretext)` from `lib/utils/shorten-middle.ts` rather than rolling a Canvas `measureText` or
+DOM-reflow path. Pretext matches the browser's own text shaping and is dynamically imported so it doesn't bloat the
+initial bundle. The separate `font-metrics/` module above is a distinct concern — it ships per-character widths to Rust
+for backend column sizing.
+
 ## Backend (Rust + Tauri 2)
 
 All under `apps/desktop/src-tauri/src/`.