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).