Fix #167: block-level gutline spans so gutter numbers align with wrapped lines
QA on dev showed .codeline spans wrap correctly but gutter .gutline spans
rendered inline (all at the same top), so numbers 6+ fell off with wrap on.
Add .gutter .gutline { display: block; } so each gutter number occupies its
own visual row, matching the one-number-per-visual-row contract of
paste-lines.js. Verified rendered output in a local build at 1400x900 and
375x812 with a long unbroken token on line 5 and wrap ON.
This commit is contained in:
@@ -299,6 +299,8 @@ html[data-wrap] .float { overflow-x: hidden; }
|
|||||||
.codebody { padding: 0 18px; white-space: pre; }
|
.codebody { padding: 0 18px; white-space: pre; }
|
||||||
/* #167: each logical line is its own block so offsetTop identifies its first visual row */
|
/* #167: each logical line is its own block so offsetTop identifies its first visual row */
|
||||||
.codeline { display: block; }
|
.codeline { display: block; }
|
||||||
|
/* #167: gutter numbers must each sit on their own visual row so they align with wrapped code lines */
|
||||||
|
.gutter .gutline { display: block; }
|
||||||
/* syntax highlight tokens (#1) */
|
/* syntax highlight tokens (#1) */
|
||||||
.tok-kw { color: #c792ea; }
|
.tok-kw { color: #c792ea; }
|
||||||
.tok-str { color: #a5e075; }
|
.tok-str { color: #a5e075; }
|
||||||
|
|||||||
Reference in New Issue
Block a user