Sandbox: fix line overflow when seq block measured before font load

The bases-per-line calc was attaching a probe to document.body with
hand-mirrored font CSS, then dividing the seq block width by the
measured glyph width. That drifted from the real rendering context in
two ways:

1. If JetBrains Mono hadn't finished loading at measure-time, the
fallback monospace was narrower → blockW underestimated → bpl too
large → rendered lines overflowed the container.
2. If the sandbox panel was still display:none when first measured
(landing on #intro and switching tabs later), clientWidth was 0
and the probe-based metrics never got refreshed against the real
layout once the panel became visible.

Three coordinated fixes:
- Move the probe inside the seq block itself so it inherits the real
font / letter-spacing / feature settings.
- tabs.js emits a tab:changed CustomEvent on every tab switch;
sandbox listens and drops charMetrics + re-renders on the next
frame once its panel is actually laid out.
- After each render, compare the first line's scrollWidth to the
available width and proportionally shrink bpl if it overshoots,
then back-solve charMetrics from the rendered line so the next
call converges without retriggering the loop.
- CSS overflow-x: auto on .sb-seq-block as a defense-in-depth net
if all of the above ever misses an edge case.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

assets/js/sections/sandbox.js

@@ -158,14 +158,21 @@
     return DARK_RGB_S;
   }
   function measureSeqChars() {
+    // Measure inside the actual seq block so the probe inherits the same
+    // font, size, weight, letter-spacing, font-feature-settings and any
+    // ancestor-driven context. Earlier this lived on document.body with
+    // hand-mirrored font styles, but that drifted from the real rendering
+    // context (font fallback while the web font was still loading, or any
+    // future style change on .sb-seq-block) and the resulting blockW was
+    // narrower than reality → bpl overshot → lines overflowed.
     const probe = document.createElement("div");
-    probe.style.cssText = "position:absolute;visibility:hidden;top:-9999px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;letter-spacing:1.5px;white-space:pre";
+    probe.style.cssText = "position:absolute;visibility:hidden;top:-9999px;left:-9999px;white-space:pre;pointer-events:none";
     probe.textContent = "    1  ";
-    document.body.appendChild(probe);
+    els.seq.appendChild(probe);
     const prefixW = probe.getBoundingClientRect().width;
     probe.textContent = "AAAAAAAAAA  ";
     const blockW = probe.getBoundingClientRect().width;
-    document.body.removeChild(probe);
+    els.seq.removeChild(probe);
     charMetrics = { prefixW, blockW };
   }
   function basesPerLineSb() {
@@ -264,7 +271,7 @@
     if (colorMode === "logprob") recomputeLpRange();
     const total = promptBases + genText;
     els.copy.disabled = total.length === 0;
-    const bpl = basesPerLineSb();
+    let bpl = basesPerLineSb();
     const totalLines = total ? Math.ceil(total.length / bpl) : 0;
     const renderedLines = els.seq.children.length;
     const needFull =
@@ -275,6 +282,43 @@
       (colorMode === "logprob" && lpRangeShifted(lastRenderedLpRange, lpRange));
     if (needFull) fullRender(bpl);
     else incrementalRender(bpl);
+    // Self-correct: the probe-based bpl can overshoot when the web font
+    // wasn't loaded yet at measure-time (the fallback monospace is
+    // narrower than JetBrains Mono → blockW too small → bpl too large).
+    // Measure the actual rendered first line, scale bpl down proportionally
+    // until it fits, then back-solve charMetrics so future renders converge
+    // on the right value without the loop.
+    if (total) {
+      const cs = getComputedStyle(els.seq);
+      const padL = parseFloat(cs.paddingLeft) || 0;
+      const padR = parseFloat(cs.paddingRight) || 0;
+      const fit = els.seq.clientWidth - padL - padR;
+      let safety = 3;
+      while (safety-- > 0 && fit > 0) {
+        const first = els.seq.firstElementChild;
+        if (!first || first.scrollWidth <= fit + 2) break;
+        if (bpl <= 10) break;
+        // Proportional shrink so we converge in 1-2 iterations even when
+        // the probe was off by 2x (font fallback case).
+        const ratio = fit / first.scrollWidth;
+        const next = Math.max(10, Math.floor((bpl * ratio) / 10) * 10);
+        if (next >= bpl) break;
+        bpl = next;
+        fullRender(bpl);
+      }
+      const first = els.seq.firstElementChild;
+      if (first && fit > 0 && bpl >= 10) {
+        // Back-solve charMetrics from the rendered first line so the next
+        // basesPerLineSb call lands at this bpl without retriggering the loop.
+        const renderedW = first.getBoundingClientRect().width;
+        const usedBlocks = bpl / 10;
+        const assumedPrefix = (charMetrics && charMetrics.prefixW) || 65;
+        const recoveredBlockW = (renderedW - assumedPrefix) / usedBlocks;
+        if (recoveredBlockW > 0 && isFinite(recoveredBlockW)) {
+          charMetrics = { prefixW: assumedPrefix, blockW: recoveredBlockW };
+        }
+      }
+    }
   }
   let renderQueued = false;
   function scheduleRender() {
@@ -466,5 +510,15 @@
   if (document.fonts && document.fonts.ready) {
     document.fonts.ready.then(() => { charMetrics = null; renderSequence(); });
   }
+  // First time the sandbox panel is shown (or any time we come back to
+  // it), the seq block may have been laid out at display:none, leaving
+  // basesPerLineSb with a stale measurement (clientWidth = 0 → bpl
+  // fallback, or font-not-yet-loaded probe → blockW too small → bpl too
+  // large → overflow). Drop charMetrics and re-render once the panel is
+  // actually visible, after the browser has had a frame to paint it.
+  window.addEventListener("tab:changed", e => {
+    if (e.detail?.name !== "sandbox") return;
+    requestAnimationFrame(() => { charMetrics = null; renderSequence(); });
+  });
 })();
 

assets/js/tabs.js

@@ -23,6 +23,13 @@
       if (opts.anchor) location.hash = opts.anchor;
       else if (location.hash.replace("#", "") !== name) location.hash = name;
     }
+    // Inform tab modules that own layout-measured DOM (e.g. sandbox's
+    // bases-per-line calc, which depends on the seq block's clientWidth)
+    // that they should re-measure on the next frame, after the new panel
+    // has actually been laid out at display:block. Without this, a panel
+    // that was first measured while hidden (clientWidth = 0, or before
+    // its web font loaded) keeps stale metrics until the user nudges it.
+    window.dispatchEvent(new CustomEvent("tab:changed", { detail: { name } }));
   }
   // Exposed so the §0 intro-guide cards (in sections/intro.js) can jump tabs.
   window.setTab = setTab;

assets/styles/sandbox.css

@@ -223,12 +223,16 @@
 
 #panel-sandbox .sb-seq-block {
   font-family: "JetBrains Mono", monospace;
-  background: #f4f4f4; border: 1px solid #ddd;
+  background: #fff; border: 1px solid #ddd;
   padding: 16px 20px;
   white-space: pre; font-size: 12px; font-weight: 400;
   line-height: 1.85; letter-spacing: 1.5px;
   min-height: 80px;
   flex: 1 0 auto;
+  /* Defense-in-depth: if the bases-per-line calculation ever overshoots
+     (e.g. before the web font finishes loading), keep the overflow inside
+     the block as a horizontal scroll instead of bleeding into the page. */
+  overflow-x: auto;
 }
 #panel-sandbox .sb-seq-block.empty {
   color: #cfcfcf;