Bugfix: File viewer word wrap no longer cuts off the file after ~60 lines

With word wrap on, files under 1 MB whose FIRST line was short (a README starting with `# Cmdr`, a log starting with a date) rendered blank space after roughly line 60, and scrolling to the bottom showed nothing: the end of the file was unreachable.

Root cause, two stacked inaccuracies in the pretext height map (`viewer-line-heights.svelte.ts`):

- `viewer-text-width.svelte.ts` measured the wrap width off the first `.line-text` span. That span is a flex item with no `flex-grow`, so it shrink-wraps to its own content: `# Cmdr` measures ~44px. Pretext then wrapped EVERY line at 44px, inflating the height map ~7x (12,348px spacer for ~1,800px of content on Cmdr's own README). The virtual scroll mapped positions through the inflated map while the DOM rendered real 18px rows, so the render window ended around line 60 and the rest of the scroll range was blank. Fix: derive the available width from the row geometry instead (scroll container `clientWidth` minus `.line` padding minus the gutter), which is also correct in no-wrap mode where the row itself is as wide as the widest line.
- Pretext reports height 0 for empty lines, while the DOM renders every `.line` row at least one line tall (the gutter number keeps the row open). On a README with 35 blank lines the map under-counted by ~630px. Fix: clamp each line's height to `getLineHeight()` in `buildPrefixSum`.

Tests (both seen red on the broken code first):

- `viewer-text-width.svelte.test.ts`: the tracker returns the available row width (736px), not the first line's text width (44px), plus pure `computeAvailableTextWidth` cases.
- `viewer-wordwrap-scroll.spec.ts` (E2E): with wrap on, scrolling to the bottom of a short-first-line file shows the last line, sampled across the height map's async ready flip.

Verified live on the original README repro: spacer now matches the content, the last line lands exactly at the viewport bottom, and mid-file scrolling leaves no blank viewport.

Author: vdavid

apps/desktop/src/routes/viewer/CLAUDE.md

@@ -14,7 +14,7 @@ FE primitives live at [`src/lib/file-viewer/CLAUDE.md`](../../lib/file-viewer/CL
 | `viewer-scroll.svelte.ts`       | Virtual scroll composable: line cache, fetch debounce, scroll compression, effects                                                                                                                                                     |
 | `viewer-search.svelte.ts`       | Search composable: start/poll/cancel/navigate, match highlighting, debounce, `useRegex` and `caseSensitive` toggles, regex-error projection                                                                                            |
 | `viewer-line-heights.svelte.ts` | Height map for accurate word-wrap scrolling via pretext (FullLoad files only)                                                                                                                                                          |
-| `viewer-text-width.svelte.ts`   | `ResizeObserver`-driven tracker for the rendered `.line-text` width                                                                                                                                                                    |
+| `viewer-text-width.svelte.ts`   | `ResizeObserver`-driven tracker for the width available to line text (scroll container minus gutter and `.line` padding)                                                                                                               |
 | `viewer-indexing-poll.ts`       | Periodic `viewer_get_status` poll while the backend builds a line index                                                                                                                                                                |
 | `viewer-keyboard.ts`            | Pure key helpers (`handleNavigationKey` / `handleToggleKey` / `handleSearchToggleKey` / `handleTailToggleKey`) plus `createViewerKeyboard`, the page's full keydown router (modifier shortcuts, Escape ladder, ⌘A, bare-key dispatch)  |
 | `selection.svelte.ts`           | Selection model: state + pure helpers (normalise, in-range, segment bounds, byte estimator)                                                                                                                                            |
@@ -180,6 +180,16 @@ either duplicate work or risk a different result.
 - `runHeightMapInitEffect` guards with `if (heightMap.ready) return` to avoid re-preparing when only `textWidth`
   changes. Width-only changes are handled by `runHeightMapReflowEffect` via `reflow()` (instant) instead of re-running
   the async `prepareLines` pipeline. Without this guard, both effects would race on width changes.
+- **The height map's wrap width comes from the row geometry, never from a `.line-text` span.**
+  `viewer-text-width.svelte.ts` computes it as the scroll container's `clientWidth` minus the `.line` padding and the
+  gutter (`.line-number` width + margin). `.line-text` is a flex item with no `flex-grow`, so it shrink-wraps to its own
+  content: measuring it on a file whose first line is short ("# Cmdr", ~44px) once fed a 44px wrap width to pretext,
+  inflating the height map ~7x (blank space below ~line 60, end of the file unreachable). The `.line` row is no better:
+  in no-wrap mode the `.lines-container` is `max-content`, so the row is as wide as the widest line. Pinned by
+  `viewer-text-width.svelte.test.ts` and `viewer-wordwrap-scroll.spec.ts` (E2E).
+- **Pretext reports height 0 for empty lines; `buildPrefixSum` clamps each line to `getLineHeight()`.** The DOM renders
+  every `.line` row at least one line tall (the gutter number keeps the row open), so without the clamp the height map
+  under-counts by one row per empty line and the scroll mapping drifts on files with many blank lines.
 - `closeWindow()`'s `setTimeout(() => …, 0)` before `currentWindow.close()` is load-bearing — not decoration. Calling
   `close()` synchronously from inside a webview event handler runs webkit2gtk's destruction on the same GTK main-loop
   tick, stalling other webviews' IPC for an undefined duration. The settings page (`routes/settings/+page.svelte`'s

apps/desktop/src/routes/viewer/viewer-line-heights.svelte.ts

@@ -147,11 +147,15 @@ export function createLineHeightMap() {
     if (!currentLayoutFn) return
     const n = preparedTexts.length
     const sums = new Float64Array(n + 1)
+    const minHeight = getLineHeight()
     let acc = 0
     for (let i = 0; i < n; i++) {
       sums[i] = acc
-      const result = currentLayoutFn(preparedTexts[i], maxWidth, getLineHeight())
-      acc += result.height
+      const result = currentLayoutFn(preparedTexts[i], maxWidth, minHeight)
+      // Pretext reports height 0 for empty lines, but the DOM renders every
+      // `.line` row at least one line tall (the gutter number keeps the row
+      // open). Clamp so the prefix sum matches what's actually on screen.
+      acc += Math.max(result.height, minHeight)
     }
     sums[n] = acc
     cumHeight = sums

apps/desktop/src/routes/viewer/viewer-text-width.svelte.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+
+import { computeAvailableTextWidth, createTextWidthTracker } from './viewer-text-width.svelte'
+
+/** Stub rAF so tests can flush the tracker's deferred measurements synchronously. */
+let rafQueue: FrameRequestCallback[] = []
+let originalRaf: typeof requestAnimationFrame
+
+function flushRaf(): void {
+  const queue = rafQueue
+  rafQueue = []
+  for (const cb of queue) cb(performance.now())
+}
+
+beforeEach(() => {
+  originalRaf = globalThis.requestAnimationFrame
+  globalThis.requestAnimationFrame = (cb: FrameRequestCallback): number => {
+    rafQueue.push(cb)
+    return rafQueue.length
+  }
+})
+
+afterEach(() => {
+  globalThis.requestAnimationFrame = originalRaf
+  rafQueue = []
+  document.body.innerHTML = ''
+})
+
+function makeRect(width: number): DOMRect {
+  return {
+    width,
+    height: 18,
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: 18,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  }
+}
+
+/**
+ * Builds the viewer's content DOM with a SHORT first line ("# Cmdr", 44px of
+ * text) inside a much wider viewport. Mirrors the regression case: the wrap
+ * width must come from the row geometry, never from the first line's own
+ * shrink-wrapped text span.
+ */
+function makeViewerDom({
+  contentClientWidth,
+  gutterWidth,
+  firstLineTextWidth,
+}: {
+  contentClientWidth: number
+  gutterWidth: number
+  firstLineTextWidth: number
+}): HTMLDivElement {
+  const content = document.createElement('div')
+  content.className = 'file-content'
+  // happy-dom doesn't lay anything out; stub the scroll container's client width.
+  Object.defineProperty(content, 'clientWidth', { value: contentClientWidth, configurable: true })
+
+  const line = document.createElement('div')
+  line.className = 'line'
+  line.style.paddingLeft = '8px'
+  line.style.paddingRight = '8px'
+
+  const lineNumber = document.createElement('span')
+  lineNumber.className = 'line-number'
+  lineNumber.style.marginRight = '8px'
+  lineNumber.getBoundingClientRect = () => makeRect(gutterWidth)
+
+  const lineText = document.createElement('span')
+  lineText.className = 'line-text'
+  lineText.textContent = '# Cmdr'
+  lineText.getBoundingClientRect = () => makeRect(firstLineTextWidth)
+
+  line.append(lineNumber, lineText)
+  content.appendChild(line)
+  document.body.appendChild(content)
+  return content
+}
+
+describe('computeAvailableTextWidth', () => {
+  it('subtracts line padding and the gutter from the container width', () => {
+    expect(
+      computeAvailableTextWidth({
+        contentClientWidth: 800,
+        linePaddingLeft: 8,
+        linePaddingRight: 8,
+        gutterOuterWidth: 48,
+      }),
+    ).toBe(736)
+  })
+
+  it('clamps to 0 when the gutter eats the whole width', () => {
+    expect(
+      computeAvailableTextWidth({
+        contentClientWidth: 40,
+        linePaddingLeft: 8,
+        linePaddingRight: 8,
+        gutterOuterWidth: 48,
+      }),
+    ).toBe(0)
+  })
+})
+
+describe('createTextWidthTracker', () => {
+  it('measures the available row width, not the first line text span (which shrink-wraps to its content)', () => {
+    const content = makeViewerDom({ contentClientWidth: 800, gutterWidth: 40, firstLineTextWidth: 44 })
+    const tracker = createTextWidthTracker({
+      getContentRef: () => content,
+      getVisibleLinesKey: () => 1,
+    })
+
+    tracker.runVisibleLinesEffect()
+    flushRaf()
+
+    // 800 (scroll container) - 8 - 8 (line padding) - 40 (gutter) - 8 (gutter margin) = 736.
+    // Pre-fix this returned 44 (the width of "# Cmdr"), which made the word-wrap
+    // height map wrap every line at 44px and inflate the scroll height ~7x.
+    expect(tracker.textWidth).toBe(736)
+  })
+})

apps/desktop/src/routes/viewer/viewer-text-width.svelte.ts

@@ -1,5 +1,17 @@
-/** Tracks the rendered width of a `.line-text` element inside the given content ref.
- *  Used by the viewer's height-map logic to wrap lines correctly at the current width.
+/** Tracks the width available for line text inside the given content ref: the
+ *  scroll container's client width minus the `.line` row padding and the gutter
+ *  (line number + its margin). Used by the viewer's height-map logic to wrap
+ *  lines at the same width the browser wraps them.
+ *
+ *  Never measure the `.line-text` span itself: it's a flex item with no
+ *  `flex-grow`, so it shrink-wraps to its own content. A file whose first
+ *  rendered line is short ("# Cmdr") would yield a ~44px "available width",
+ *  making the height map wrap every line at 44px and inflate the scroll
+ *  height ~7x (blank space below ~line 60, end of the file unreachable).
+ *  The `.line` row can't be measured either: in no-wrap mode the
+ *  `.lines-container` is `max-content`, so the row is as wide as the WIDEST
+ *  line. Deriving the width from the scroll container keeps the measurement
+ *  correct in both wrap modes.
  *
  *  Exposed effects mirror the composable pattern used by `viewer-scroll.svelte.ts`:
  *  the page component wires them as `$effect`s so reactivity is preserved. */
@@ -9,13 +21,37 @@ interface TextWidthDeps {
   getVisibleLinesKey: () => unknown
 }
 
+/**
+ * Width available for a line's text: the scroll container's content area minus
+ * the `.line` row padding and the gutter (the `.line-number` outer width plus
+ * its right margin). Clamped to 0 for degenerate inputs.
+ */
+export function computeAvailableTextWidth(args: {
+  contentClientWidth: number
+  linePaddingLeft: number
+  linePaddingRight: number
+  gutterOuterWidth: number
+}): number {
+  const { contentClientWidth, linePaddingLeft, linePaddingRight, gutterOuterWidth } = args
+  return Math.max(0, contentClientWidth - linePaddingLeft - linePaddingRight - gutterOuterWidth)
+}
+
 export function createTextWidthTracker(deps: TextWidthDeps) {
   let textWidth = $state(0)
 
   function measure(el: HTMLElement) {
-    const lineText = el.querySelector('.line-text')
-    if (!lineText) return
-    const w = lineText.getBoundingClientRect().width
+    const line = el.querySelector('.line')
+    const lineNumber = el.querySelector('.line-number')
+    if (!(line instanceof HTMLElement) || !(lineNumber instanceof HTMLElement)) return
+    const lineStyle = getComputedStyle(line)
+    const lineNumberStyle = getComputedStyle(lineNumber)
+    const w = computeAvailableTextWidth({
+      contentClientWidth: el.clientWidth,
+      linePaddingLeft: Number.parseFloat(lineStyle.paddingLeft) || 0,
+      linePaddingRight: Number.parseFloat(lineStyle.paddingRight) || 0,
+      gutterOuterWidth:
+        lineNumber.getBoundingClientRect().width + (Number.parseFloat(lineNumberStyle.marginRight) || 0),
+    })
     if (w > 0 && Math.abs(w - textWidth) > 1) {
       textWidth = w
     }
@@ -41,18 +77,15 @@ export function createTextWidthTracker(deps: TextWidthDeps) {
   }
 
   /** Re-measures when visible lines first appear: `ResizeObserver` won't fire if the
-   *  container size didn't change but the inner `.line-text` element just became
-   *  present in the DOM. */
+   *  container size didn't change but the inner `.line` row just became present in
+   *  the DOM. */
   function runVisibleLinesEffect() {
     void deps.getVisibleLinesKey()
     if (textWidth > 0) return
     requestAnimationFrame(() => {
       const ref = deps.getContentRef()
       if (!ref) return
-      const lineText = ref.querySelector('.line-text')
-      if (!lineText) return
-      const w = lineText.getBoundingClientRect().width
-      if (w > 0) textWidth = w
+      measure(ref)
     })
   }
 

apps/desktop/test/e2e-playwright/CLAUDE.md

@@ -153,6 +153,7 @@ details.
 | `viewer-encoding-picker.spec.ts`      | 1 test: switching encoding from UTF-16 LE to UTF-8 on a 6 MB file keeps the viewport interactive during the background rebuild.                                                                                                                                                                                                                                            |
 | `viewer-tail.spec.ts`                 | 1 test: enabling tail mode auto-extends the viewport when the file grows on disk. Uses `fs.appendFile` to drive the FSEvents pipeline end to end. `test.describe.configure({ timeout: 30000 })` to absorb FSEvents debounce + BE coalescer.                                                                                                                                |
 | `viewer-wordwrap-persistence.spec.ts` | 1 test: word wrap toggled in one viewer session is on in the next. Exercises the restricted-window settings path (typed commands + main-window bridge) under the real capability ACL, which vitest can't reproduce. Polls the instance's `settings.json` (requires `CMDR_DATA_DIR`) so the reopen never races the 500 ms save debounce.                                    |
+| `viewer-wordwrap-scroll.spec.ts`      | 1 test: with word wrap on, scrolling to the bottom of a short-first-line file shows the last line. Regression pin for the height-map wrap width: measuring the first `.line-text` span (shrink-wrapped, ~44px for "# Cmdr") once inflated the scroll height ~7x and made the end of the file unreachable blank space.                                                      |
 | `mtp.spec.ts`                         | MTP E2E tests: volume selection, navigation, file ops, large file transfer via virtual device. Uses `e2e-shared/mcp-client.ts` (MCP client helper) and `e2e-shared/mtp-fixtures.ts` (MTP fixtures). Requires `virtual-mtp` feature.                                                                                                                                        |
 | `mtp-conflicts.spec.ts`               | MTP conflict resolution: cross-volume move (MTP↔local) and same-volume move (MTP→MTP) with overwrite/skip policies. Requires `virtual-mtp` feature.                                                                                                                                                                                                                        |
 | `mtp-same-volume-move-merge.spec.ts`  | Same-volume rename-merge fast path: MTP→MTP folder move auto-merges (no folder prompt), a clashing file inside follows the file policy (prompts under Stop), and a dest-only file survives. MTP-backed (uses the real `move_within_same_volume` rename-merge), so it lives on the dedicated MTP shard. Requires `virtual-mtp` feature.                                     |