diff --git a/internal/web/static/paste-lines.js b/internal/web/static/paste-lines.js index e385e9d..fc6aabb 100644 --- a/internal/web/static/paste-lines.js +++ b/internal/web/static/paste-lines.js @@ -44,6 +44,23 @@ // measured, not derived from span counts or heights. function renumber() { var lines = body.querySelectorAll('.codeline'); + // #257: size the gutter column to the widest line number so numbers in + // the 100s+ fit their own column instead of bleeding into the code text. + // The gutter is box-sizing: border-box, so the column width must be the + // digits PLUS the 10px left + 10px right padding; at the CSS default 3ch + // the padding alone leaves only ~19px of content, and any 2+ digit + // number overflows into the code. Numbers are right-aligned, and the + // width below fits the widest number exactly. Set via CSSOM (CSP + // forbids inline style attributes). Only touch the width when it + // changes: the resize observer below re-runs renumber() when the gutter + // width reflows the code column, and rewriting the same value would + // ping-pong the fixed point forever. + var digits = String(lines.length || 1).length; + var w = 'calc(' + digits + 'ch + 20px)'; + if (gutter.style.width !== w) { + gutter.style.minWidth = w; + gutter.style.width = w; + } if (!wrapOn() || !lines.length) { // wrap OFF: one number per logical line (pre-existing behavior, // including the gutter scrolling with horizontal scroll).