From f94a813d79440e9c3ac2a4d68863be8eed209e1f Mon Sep 17 00:00:00 2001 From: fen Date: Thu, 17 Sep 2026 14:35:52 -0500 Subject: [PATCH] #261: keep line number gutter visible during horizontal scroll - move the horizontal scroll from the .code flex container to the codebody so the pinned gutter stays in view --- internal/web/static/app.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/internal/web/static/app.css b/internal/web/static/app.css index 389c78f..16276d6 100644 --- a/internal/web/static/app.css +++ b/internal/web/static/app.css @@ -299,8 +299,14 @@ html[data-wrap] .float { overflow-x: hidden; } .code-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .code { font-family: var(--font-mono); font-size: var(--code-fs); line-height: var(--code-lh); - padding: 14px 0; display: flex; overflow-x: auto; + padding: 14px 0; display: flex; overflow-x: hidden; } +/* #261: horizontal scroll must live on the codebody, not the .code flex + container — a container-level scroll takes the gutter with it when the + user scrolls long lines. The gutter sits OUTSIDE the scroll container and + stays visible; the codebody shrinks to the remaining space and scrolls + (min-width: 0 lets it shrink below its content width inside the flex row). */ +.code .codebody { flex: 1 1 auto; min-width: 0; 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 @@ -310,7 +316,7 @@ html[data-wrap] .float { overflow-x: hidden; } .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; } -.codebody { padding: 0 18px; white-space: pre; } +.codebody { padding: 0 18px; white-space: pre; overflow-x: auto; } /* #167: each logical line is its own block so offsetTop identifies its first visual row */ .codeline { display: block; } /* #167 rev: gutter number spans must stack one per visual row (wrap on) */