Fix #167: renumber gutter to visual rows when line wrap is on
Split the paste codebody into per-line block spans (paste-lines.js) and rebuild the gutter from each line's wrapped height so numbers count visual rows, not logical lines. Pinned the gutter width (flex 0 0 auto, 3ch) so its row count no longer feeds back into the code column width. ResizeObserver renumbers on wrap toggle / resize; wrap-off behavior is unchanged (one number per newline).
This commit is contained in:
@@ -270,6 +270,10 @@ body {
|
||||
.btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
|
||||
/* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */
|
||||
html[data-wrap] .codebody { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
|
||||
/* #167: overflow:hidden zeroes the flex auto-minimum, so the codebody must
|
||||
be told to fill the space left of the gutter or it collapses and the
|
||||
gutter (flex-shrink:0) consumes the whole row */
|
||||
html[data-wrap] .code .codebody { flex: 1 1 auto; min-width: 0; }
|
||||
html[data-wrap] .editor { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; overflow-x: hidden; }
|
||||
/* #152: with wrap on nothing may scroll horizontally, including the code container and mobile floats */
|
||||
html[data-wrap] .code { overflow-x: hidden; }
|
||||
@@ -284,6 +288,12 @@ html[data-wrap] .float { overflow-x: hidden; }
|
||||
font-family: var(--font-mono); font-size: var(--code-fs); line-height: var(--code-lh);
|
||||
padding: 14px 0; display: flex; overflow-x: auto;
|
||||
}
|
||||
/* #167: the gutter must not drive the flex layout — its content width
|
||||
(row count × number width) shrinks the code column, which re-wraps lines,
|
||||
which grows the gutter: a feedback loop. Pin the gutter with a fixed
|
||||
basis, take its width out of the negotiation, and let the codebody take
|
||||
the rest. */
|
||||
.code .gutter { flex: 0 0 auto; width: 3ch; min-width: 3ch; overflow: visible; }
|
||||
.code .gutter { flex-shrink: 0; }
|
||||
/* gutter/code share line metrics; the editor gutter keeps its own padding (#50) */
|
||||
.code .gutter { padding-top: 0; padding-bottom: 0; }
|
||||
@@ -786,3 +796,5 @@ button[type="submit"]:focus-visible,
|
||||
.toggle-inline { display: inline-flex; }
|
||||
.wrap-normal { word-break: normal; overflow-wrap: break-word; }
|
||||
.created-banner { display: block; }
|
||||
/* #167: gutter rows for wrapped paste view — one row per visual code line */
|
||||
.gutline { display: block; }
|
||||
|
||||
Reference in New Issue
Block a user