leaderboard: fix metrics 'On this page' links on mobile

When embedded on huggingface.co the Space is in a cross-origin outer
frame that owns the scroll, so a content-sized metrics iframe couldn't be
scrolled from inside and the anchor links silently did nothing. Give the
mobile metrics iframe its own bounded height so it scrolls its own
document; scrollIntoView then works for the 'On this page' links. Desktop
unchanged.

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

metrics_page.py

@@ -112,10 +112,9 @@ figure.fig figcaption { font-size: 0.84em; color: #5b6170; margin-top: 6px;
 .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. */
+  /* Tighten the reading frame for phones. The end-spacer stays (vh of the
+     bounded mobile iframe) so the last "On this page" target can scroll to the
+     top of the box. */
   body { padding: 16px 14px 28px; }
   h1 { font-size: 1.5em; }
   .card { padding: 16px 16px; }
@@ -123,7 +122,6 @@ figure.fig figcaption { font-size: 0.84em; color: #5b6170; margin-top: 6px;
   pre.formula { font-size: 0.78em; padding: 12px 13px; }
   table { font-size: 0.86em; }
   th, td { padding: 6px 8px; }
-  .endspace { height: 24px; }
 }
 """
 
@@ -374,14 +372,20 @@ def build_metrics_page() -> str:
     )
 
 
-# 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.
+# Mobile sizing for the embedding iframe.
+#
+# We deliberately give the phone iframe its OWN bounded height (an internal
+# scroll) rather than auto-sizing it to the full content. Reason: when embedded
+# on huggingface.co the Space sits in a cross-origin outer frame that owns the
+# real scroll, so a content-sized iframe can't be scrolled from inside -- which
+# silently breaks the "On this page" anchor links (scrollIntoView has nothing it
+# is allowed to move). A bounded iframe scrolls its own document, so the anchors
+# work again. Desktop keeps its fixed CSS height (reads well there).
+#
+# Anchor clicks use scrollIntoView (smooth, scrolls whichever ancestor actually
+# scrolls -- the bounded iframe when embedded, the window on the standalone
+# /metrics route). All wrapped in try/catch: frameElement access is fine for
+# this same-origin iframe but must never throw if that ever changes.
 _JS = """
 (function () {
   var narrow = (window.innerWidth || 1000) < 760;
@@ -389,7 +393,10 @@ _JS = """
     if (!narrow) return;
     try {
       var fe = window.frameElement;
-      if (fe) fe.style.height = Math.ceil(document.documentElement.scrollHeight) + 'px';
+      if (!fe) return;                       // standalone /metrics: window scrolls
+      var avail = (window.screen && window.screen.availHeight) || 740;
+      var h = Math.max(340, Math.min(640, Math.round(avail - 360)));
+      fe.style.height = h + 'px';            // bounded -> the iframe scrolls itself
     } catch (e) { /* keep the CSS fallback height */ }
   }
   document.addEventListener('click', function (e) {
@@ -400,7 +407,6 @@ _JS = """
   });
   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();
 })();
 """