Fix resize, watermark visibility, and live speed slider

index.html

@@ -118,6 +118,7 @@
   svg {
     width: 100%;
     height: auto;
+    max-height: calc(100vh - 180px);
     display: block;
   }
 
@@ -149,7 +150,7 @@
   }
 
   .date-watermark {
-    fill: rgba(0, 0, 0, 0.06);
+    fill: rgba(0, 0, 0, 0.18);
     font-size: 64px;
     font-weight: 700;
     pointer-events: none;
@@ -203,10 +204,17 @@
   const margin = { top: 30, right: 90, bottom: 10, left: 6 };
   const width = 1050;
 
-  // Fit all bars in viewport: subtract header/controls (~140px) from window height
-  const availableHeight = Math.max(400, window.innerHeight - 160);
-  const barHeight = Math.min(38, Math.floor((availableHeight - margin.top - margin.bottom) / topN));
-  const height = margin.top + barHeight * topN + margin.bottom;
+  // Dynamic dimensions — recomputed on resize so all bars stay in view
+  let barHeight, height, nameFontSize, scoreFontSize, watermarkSize;
+  function computeDimensions() {
+    const availableHeight = Math.max(400, window.innerHeight - 160);
+    barHeight = Math.min(38, Math.floor((availableHeight - margin.top - margin.bottom) / topN));
+    height = margin.top + barHeight * topN + margin.bottom;
+    nameFontSize = Math.max(9, Math.min(13, barHeight * 0.36));
+    scoreFontSize = Math.max(8, Math.min(12, barHeight * 0.33));
+    watermarkSize = Math.max(36, Math.min(64, height * 0.11));
+  }
+  computeDimensions();
 
   // ---- Populate dropdown ----
   const select = d3.select("#benchmark-select");
@@ -238,27 +246,29 @@
     return y(rank) ?? margin.top + barHeight * topN;
   }
 
-  // Groups (layered bottom to top)
-  const watermarkG = svg.append("g");
+  // Groups (layered bottom to top) — watermark on top so it overlays bars
   const axisG = svg.append("g").attr("class", "axis");
   const barG = svg.append("g");
   const logoG = svg.append("g");
   const nameG = svg.append("g");
   const scoreG = svg.append("g");
+  const watermarkG = svg.append("g");
 
-  // Dynamic sizes based on bar height
-  const nameFontSize = Math.max(9, Math.min(13, barHeight * 0.36));
-  const scoreFontSize = Math.max(8, Math.min(12, barHeight * 0.33));
-  const watermarkSize = Math.max(36, Math.min(64, height * 0.11));
-
-  // Date watermark
+  // Date watermark — position/size refreshed on resize via applyDimensions()
   const ticker = watermarkG.append("text")
     .attr("class", "date-watermark")
-    .style("font-size", watermarkSize + "px")
     .attr("x", width - margin.right - 10)
-    .attr("y", height - 20)
     .attr("text-anchor", "end");
 
+  function applyDimensions() {
+    svg.attr("viewBox", [0, 0, width, height]);
+    y.range([margin.top, margin.top + barHeight * topN]);
+    ticker
+      .style("font-size", watermarkSize + "px")
+      .attr("y", height - 20);
+  }
+  applyDimensions();
+
   // ---- Build keyframes for a benchmark ----
   function buildKeyframes(benchmarkKey) {
     const bm = raw.benchmarks[benchmarkKey];
@@ -582,6 +592,26 @@
   d3.select("#speed-slider").on("input", function () {
     frameDuration = +this.value;
     d3.select("#speed-label").text(this.value + "ms");
+    // Interrupt running transitions so the new speed applies immediately
+    if (playing) svg.selectAll("*").interrupt();
+  });
+
+  // ---- Resize: keep all bars in view when the window changes ----
+  let resizeTimer;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      const prevHeight = height;
+      const prevBarHeight = barHeight;
+      computeDimensions();
+      if (height === prevHeight && barHeight === prevBarHeight) return;
+      applyDimensions();
+      if (keyframes.length > 0) {
+        // Clear and re-render so font sizes / bar heights pick up new dimensions
+        clearChart();
+        renderFrame(currentFrame, 0);
+      }
+    }, 150);
   });
 
   // ---- Initialize: load default benchmark and auto-play ----