Fix #167: drop join newline between .codeline spans; fix gutter font-size mismatch

Root cause per QA on palette-dev (merge d402113): splitLines() joined
.codeline spans with '\n'; under white-space:pre-wrap each newline text
node between display:block spans rendered as its own extra visual row,
while renumber() counted gutter rows only from span heights — numbers
drifted up one row per wrapped line. Join with '' (spans are blocks).

Also: in the <=640px media query, .gutter { font-size: 15px } overrode
the paste-view gutter size while .code switched to 13px, so gutline rows
were ~36.7px vs 22.1px code rows at narrow widths — every number below
line 1 drifted. Scope the paste-view gutter to the code font size.

Verified with headless Chromium DOM geometry (desktop 1400x900 and
mobile 375x812): gutter number tops equal their .codeline tops for
lines wrapping to 2-3 rows, wrap OFF numbering unchanged
('1\n2\n3\n4\n5'), no horizontal scroll.
This commit is contained in:
fen
2026-09-10 12:24:46 -05:00
parent 2149fcc2e1
commit f27d125659
2 changed files with 15 additions and 2 deletions
+4
View File
@@ -603,6 +603,10 @@ a.admin-link:hover { color: var(--fg); text-decoration: underline; }
.editor-wrap { min-height: 45vh; }
.editor { font-size: 15px; }
.gutter { font-size: 15px; }
/* #167: the paste-view gutter must track .code's font size, not the editor
gutter's — mismatched font sizes make gutline rows taller/shorter than
code rows and every number drifts off its line start */
.code .gutter { font-size: var(--code-fs); }
.editor-head { flex-wrap: wrap; }
.editor-head-title { flex: 1 1 100%; }
.editor-head input { min-width: 0; font-size: 16px; }