leaderboard: make the gallery the single scroller

Sizing the iframe to a fixed 80vh left two scrollbars (the iframe body
and the outer Gradio page), which was confusing. Now fitIframe measures
the available height from the iframe's own top down to the bottom of the
viewport (via the same-origin parent) and sizes the iframe to
min(content, available), reserving room for the Refresh button. Short
content shrinks the iframe (nothing scrolls); tall content fills the
viewport so only the iframe body scrolls and the sticky header + GT row
stay locked. The outer page no longer needs its own scrollbar.

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

app.py

@@ -793,16 +793,15 @@ def _gallery_iframe_html() -> str:
         rows, _render_proxy_url, _gt_proxy_url, _render_diff_proxy_url,
     )
     escaped = html.escape(doc, quote=True)
-    # The gallery JS (`fitIframe`) resizes this iframe to its own content so it
-    # is compact when there are few rows. `max-height` caps it: once the content
-    # is taller than the cap the iframe stops growing and its own body scrolls,
-    # which is what keeps the gallery's sticky column header + ground-truth row
-    # locked at the top. The cap is in `vh` here (reliable in the Gradio doc)
-    # rather than computed from JS (the nested-iframe parent height is not the
-    # browser viewport). The inline height is the pre-script fallback.
+    # The gallery JS (`fitIframe`) sizes this iframe to be the single scroller:
+    # it shrinks to the content for few rows, otherwise fills down to the bottom
+    # of the viewport so only the iframe's own body scrolls (keeping the sticky
+    # header + ground-truth row locked) and the outer Gradio page does not also
+    # scroll. The inline `height` is just the pre-script fallback; JS overrides
+    # it, so no `max-height` here (it would clamp the measured fill height).
     return (
         f'<iframe srcdoc="{escaped}" '
-        'style="width:100%; height:80vh; max-height:80vh; border:0; display:block;" '
+        'style="width:100%; height:80vh; border:0; display:block;" '
         'title="CADGenBench gallery"></iframe>'
     )
 

gallery.py

@@ -574,16 +574,29 @@ function syncHeadHeight() {
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
-// Size the iframe to its content, but only up to the `max-height` the host sets
-// on the iframe element (see app.py). With few rows the iframe shrinks to the
-// content (compact, no empty box); once the content is taller than the cap the
-// iframe stays at the cap and its own body scrolls -- which is what lets the
-// sticky column header + ground-truth row stay locked at the top while the
-// submission rows scroll under them. No-ops if frameElement is unreadable.
+// 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
 function fitIframe() {
   try {
     const fe = window.frameElement;
-    if (fe) fe.style.height = Math.ceil(document.body.scrollHeight) + 'px';
+    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';
   } catch (e) { /* sandboxed -> keep fallback height */ }
 }
 
@@ -591,6 +604,9 @@ buildGallery();
 fitIframe();
 function relayout() { syncHeadHeight(); 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);
 """