leaderboard: metrics tab single-scroll + polish on mobile

On phones the Metrics tab's fixed 85vh iframe made a nested scroll-box.
Auto-size the embedding iframe to the page content on narrow screens so
it's a single page scroll (desktop keeps its fixed height, which reads
well). In-page anchor links use scrollIntoView so they still work when
the iframe has no internal scroll. Also tighten padding/formula/table
sizing and shrink the vh end-spacer on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>

metrics_page.py

@@ -111,6 +111,20 @@ figure.fig figcaption { font-size: 0.84em; color: #5b6170; margin-top: 6px;
                         max-width: 560px; }
 .weight-pill { font-family: monospace; font-size: 0.8em; padding: 1px 7px;
                border-radius: 6px; background: #eceff1; color: #37474f; }
+@media (max-width: 760px) {
+  /* On phones the page flows in a single scroll (the embedding iframe is
+     auto-sized to content, see the inline script), so the big vh end-spacer
+     would add a screenful of blank -- shrink it to a fixed nub. Tighten the
+     reading frame a touch too. */
+  body { padding: 16px 14px 28px; }
+  h1 { font-size: 1.5em; }
+  .card { padding: 16px 16px; }
+  .card h2 { font-size: 1.12em; }
+  pre.formula { font-size: 0.78em; padding: 12px 13px; }
+  table { font-size: 0.86em; }
+  th, td { padding: 6px 8px; }
+  .endspace { height: 24px; }
+}
 """
 
 
@@ -355,5 +369,38 @@ def build_metrics_page() -> str:
         "one.</p>"
         f"{toc}{overview}{validity}{shape}{topology}{interface}{editing}"
         f"{footer}"
+        f"<script>{_JS}</script>"
         "</body></html>"
     )
+
+
+# On phones, size the embedding iframe to the page's content so the Metrics tab
+# is a single page scroll instead of a nested 85vh scroll-box (the desktop tab
+# keeps its fixed height -- it reads well there). In-page anchor links use
+# scrollIntoView so they still work when the iframe has no internal scroll (it
+# walks up to scroll the parent frame); on the standalone /metrics route there
+# is no frame and the browser just scrolls normally. All wrapped in try/catch:
+# frameElement/parent access is fine for this same-origin iframe but must never
+# throw if that ever changes.
+_JS = """
+(function () {
+  var narrow = (window.innerWidth || 1000) < 760;
+  function fit() {
+    if (!narrow) return;
+    try {
+      var fe = window.frameElement;
+      if (fe) fe.style.height = Math.ceil(document.documentElement.scrollHeight) + 'px';
+    } catch (e) { /* keep the CSS fallback height */ }
+  }
+  document.addEventListener('click', function (e) {
+    var a = e.target && e.target.closest ? e.target.closest('a[href^="#"]') : null;
+    if (!a) return;
+    var el = document.getElementById(a.getAttribute('href').slice(1));
+    if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
+  });
+  window.addEventListener('load', fit);
+  window.addEventListener('resize', function () { narrow = (window.innerWidth || 1000) < 760; fit(); });
+  if (window.ResizeObserver) { try { new ResizeObserver(fit).observe(document.body); } catch (e) {} }
+  fit();
+})();
+"""