leaderboard: gallery scroll box sized off screen.availHeight

Verified the real cause with a headless harness reproducing HF's nested
iframes: HF auto-resizes the Space iframe to full content height, so
inside the gallery window.innerHeight / parent.innerHeight / vh are all
inflated to the content height (live: 1642 vs a 900 viewport) and only
the cross-origin top window scrolls -- which is why no inner cap or
sticky-against-the-iframe ever worked and the GT row scrolled away.

screen.availHeight is the one viewport-ish measure that survives the
nesting, so size the gallery's own scroll box from it (availHeight minus
a chrome reserve, clamped). The column header + GT row are sticky inside
that box, so they stay locked while the submission rows scroll, and the
box is the single scroller (harness confirms no outer-page overflow
across laptop/desktop/large screens).

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

gallery.py

@@ -250,7 +250,18 @@ body {
 .section-caption { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
 .section-caption b { color: var(--ink); font-weight: 600; }
 
-.gallery { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
+/* The gallery is its own scroll container so the column header + ground-truth
+   row (both `position: sticky`) stay locked at the top while the submission
+   rows scroll inside it. This is the ONLY scroller for the rows -- it must not
+   leak out to the host page. Height is set in JS from `screen.availHeight`
+   (the one viewport-ish measure that survives HF's nested iframes, which
+   inflate `innerHeight`/`vh` to the full content height); the px value here is
+   the pre-script fallback. */
+.gallery {
+  background: var(--panel); border: 1px solid var(--line);
+  border-radius: var(--radius); box-shadow: var(--shadow); position: relative;
+  max-height: var(--gallery-max, 560px); overflow-y: auto; overflow-x: hidden;
+}
 .grid-head, .grow {
   display: grid;
   grid-template-columns: 52px minmax(200px, 1.3fr) 160px repeat(var(--ncol, 4), minmax(140px, 1fr));
@@ -574,39 +585,46 @@ function syncHeadHeight() {
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
-// Make the gallery the ONLY scroller -- no nested inner+outer scrollbars.
-// When the rows are short the iframe shrinks to the content (compact, nothing
-// scrolls). Otherwise it fills exactly from its own top down to the bottom of
-// the viewport (leaving a little room for the Refresh button below it), so the
-// outer Gradio page does not need to scroll and only the iframe's own body
-// scrolls -- which is what keeps the sticky column header + ground-truth row
-// locked at the top. The available height is measured from the parent (the
-// srcdoc iframe is same-origin); if that read is blocked it falls back to the
-// content height.
-var BOTTOM_RESERVE = 72;  // px kept clear below the iframe for the Refresh button
+// Height of the gallery scroll box. HF auto-resizes the Space iframe to its
+// full content height, so `window.innerHeight` / `vh` inside these nested
+// iframes report the inflated content height, not the real viewport -- they
+// can't be used to size a one-screen box. `screen.availHeight` is the screen
+// work-area and is NOT affected by the iframe nesting, so we derive the box
+// height from it (a fraction, clamped) and the rows scroll inside the box while
+// the sticky header + ground-truth row stay locked.
+// Reserve for everything that is NOT the scroll box but still has to fit on
+// screen: the browser/OS chrome between the screen work-area and the window
+// viewport, plus the HF page header + Gradio title/tabs + this page's caption
+// and Refresh button. Subtracting it from the screen height keeps the whole
+// gallery within one viewport, so there is a single scrollbar (the box's own)
+// rather than the box plus an outer page scroll. Deliberately generous: a box
+// that is a little short (a touch more in-box scrolling) is far better than a
+// confusing second scrollbar.
+var CHROME_RESERVE = 560;
+function sizeGalleryBox() {
+  try {
+    const avail = (window.screen && window.screen.availHeight) || 900;
+    const h = Math.max(300, Math.min(760, Math.round(avail - CHROME_RESERVE)));
+    document.documentElement.style.setProperty('--gallery-max', h + 'px');
+  } catch (e) { /* keep CSS fallback */ }
+}
+
+// With the gallery box capped, the page content (caption + box) is bounded, so
+// sizing the iframe to it keeps the iframe from adding a second scrollbar: the
+// gallery's own box is the single scroller for the rows. No-ops if frameElement
+// is unreadable.
 function fitIframe() {
   try {
     const fe = window.frameElement;
-    if (!fe) return;
-    const content = Math.ceil(document.body.scrollHeight);
-    let target = content;
-    const pv = window.parent;
-    if (pv && pv.innerHeight) {
-      const top = fe.getBoundingClientRect().top;            // iframe top in viewport
-      const avail = Math.floor(pv.innerHeight - top - BOTTOM_RESERVE);
-      if (avail > 240) target = Math.min(content, avail);
-    }
-    fe.style.height = target + 'px';
+    if (fe) fe.style.height = Math.ceil(document.body.scrollHeight) + 'px';
   } catch (e) { /* sandboxed -> keep fallback height */ }
 }
 
 buildGallery();
+sizeGalleryBox();
 fitIframe();
-function relayout() { syncHeadHeight(); fitIframe(); }
+function relayout() { syncHeadHeight(); sizeGalleryBox(); fitIframe(); }
 window.addEventListener('resize', relayout);
-// The viewport height can change without the iframe's own width changing
-// (e.g. browser window resized shorter), so also listen on the parent.
-try { window.parent.addEventListener('resize', relayout); } catch (e) { /* ignore */ }
 if (window.ResizeObserver) new ResizeObserver(fitIframe).observe(document.body);
 if (document.fonts && document.fonts.ready) document.fonts.ready.then(relayout);
 """