Fix #167: gutter numbers realign with wrapped lines #179

Merged
fen merged 1 commits from fix-167 into dev 2026-09-10 16:25:15 +00:00
Collaborator

Fixes #167

Fixes #167
fen added 1 commit 2026-09-10 16:23:58 +00:00
Fix #167: gutter numbers track wrapped visual rows when line wrap enabled
CI / docker (pull_request) Skipped
CI / test (pull_request) Successful in 38s
dee062dfa5
fen added the QA label 2026-09-10 16:24:28 +00:00
fen merged commit 0643ca433e into dev 2026-09-10 16:25:15 +00:00
Author
Collaborator

QA FAIL (live palette-dev, image sha256:76e54581..., dev merge commit 0643ca4).

Rendered verification with CDP on a 10-line paste (line 5 = 300-char unbroken token), wrap ON:

  • paste-lines.js loads and splits 10 logical .codeline spans correctly.
  • BUT there is no CSS rule for .gutline anywhere (app.css has none; grep of internal/web confirms). The spans render INLINE, so all gutter numbers overlap on one visual row: measured gutter children all at top=280.6px with height 25px vs line-height 36.72px, instead of one number per 36.72px row.
  • Gutter count (16) no longer matches rendered visual rows (19): numbers 6-10 overflow past the gutter content entirely.
  • Wrap OFF path is unaffected (plain textContent numbering still correct).

Fix path: add .code .gutter .gutline { display: block; } (plus the blank-fill \u00a0 spans inherit it) to app.css, then re-verify rendered alignment per visual row before merge.

Evidence scripts: /home/fen/qa167_cdp.py, /home/fen/qa167_align.py, /home/fen/qa167_metrics.py (CDP probes against palette-dev). Test paste 4t4h22 left on dev for re-verification.

Note: PR #179 was already merged into dev (merge 0643ca4, API race showed merged=false initially) and deployed before this pass completed; dev currently serves the broken wrap-on gutter. Reverting or fixing-forward is owner's call - not closing #167.

QA FAIL (live palette-dev, image sha256:76e54581..., dev merge commit 0643ca4). Rendered verification with CDP on a 10-line paste (line 5 = 300-char unbroken token), wrap ON: - `paste-lines.js` loads and splits 10 logical `.codeline` spans correctly. - BUT there is **no CSS rule for `.gutline`** anywhere (app.css has none; grep of internal/web confirms). The spans render INLINE, so all gutter numbers overlap on one visual row: measured gutter children all at top=280.6px with height 25px vs line-height 36.72px, instead of one number per 36.72px row. - Gutter count (16) no longer matches rendered visual rows (19): numbers 6-10 overflow past the gutter content entirely. - Wrap OFF path is unaffected (plain textContent numbering still correct). Fix path: add `.code .gutter .gutline { display: block; }` (plus the blank-fill \u00a0 spans inherit it) to app.css, then re-verify rendered alignment per visual row before merge. Evidence scripts: /home/fen/qa167_cdp.py, /home/fen/qa167_align.py, /home/fen/qa167_metrics.py (CDP probes against palette-dev). Test paste 4t4h22 left on dev for re-verification. Note: PR #179 was already merged into dev (merge 0643ca4, API race showed merged=false initially) and deployed before this pass completed; dev currently serves the broken wrap-on gutter. Reverting or fixing-forward is owner's call - not closing #167.
fen added spent time 15 minutes 2026-09-10 16:31:34 +00:00
fen deleted spent time 2026-09-10 16:58:38 +00:00
- 15 minutes
Author
Collaborator

QA on live palette-dev (1400x900 and 375x812, wrap ON): gutter sequence is right but numbers progressively drift from their lines. Root cause: splitLines() joins parts with , and those text nodes render as extra blank rows under white-space: pre while renumber() only counts rows inside each .codeline block. Measured max misalignment 146.8px @1400x900, 35.6px @375x812. Removing the inter-block newline text nodes and re-renumbering gives maxRel=0 at both viewports, confirming the diagnosis. Fix: join with `` (handle the last line) or strip whitespace-only text nodes. Merged to dev (0643ca4) and deployed; issue stays open until the follow-up fix passes rendered QA.

QA on live palette-dev (1400x900 and 375x812, wrap ON): gutter sequence is right but numbers progressively drift from their lines. Root cause: `splitLines()` joins parts with ` `, and those text nodes render as extra blank rows under `white-space: pre` while `renumber()` only counts rows inside each `.codeline` block. Measured max misalignment 146.8px @1400x900, 35.6px @375x812. Removing the inter-block newline text nodes and re-renumbering gives maxRel=0 at both viewports, confirming the diagnosis. Fix: join with `` (handle the last line) or strip whitespace-only text nodes. Merged to dev (0643ca4) and deployed; issue stays open until the follow-up fix passes rendered QA.
Sign in to join this conversation.