leaderboard: lock GT row via in-iframe scroll capped by max-height

The previous attempt capped the gallery scroll box from JS using
window.parent.innerHeight, but inside HF's nested iframes that is not the
browser viewport, so the cap came out huge: the box never scrolled, the
iframe grew to full height, and the page scrolled the GT row away.

Instead, scroll inside the iframe itself (the column header + GT row are
sticky against the iframe viewport, which reliably works) and cap the
iframe with `max-height: 80vh` in app.py, where vh is the Gradio doc
viewport. fitIframe still shrinks the iframe to content for a compact
page when there are few rows; once content exceeds the cap the iframe
body scrolls and the GT row stays pinned. Drops the unreliable JS cap
and the parent-aware modal positioning (back to plain fixed centering).

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

app.py

@@ -793,13 +793,16 @@ 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 the
-    # page scrolls naturally in the parent (no oversized fixed box, no nested
-    # scrollbar). The inline height is only the pre-script fallback for the case
-    # where same-origin `frameElement` access is blocked.
+    # 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.
     return (
         f'<iframe srcdoc="{escaped}" '
-        'style="width:100%; height:700px; border:0; display:block;" '
+        'style="width:100%; height:80vh; max-height:80vh; border:0; display:block;" '
         'title="CADGenBench gallery"></iframe>'
     )
 

gallery.py

@@ -250,17 +250,7 @@ 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; }
 
-/* Scroll container: the column header + ground-truth row are `position:
-   sticky` against this box, so they stay locked at the top while the
-   submission rows scroll. `--gallery-max` is set in JS from the parent
-   viewport height; the px value here is only the pre-script fallback.
-   When the content is shorter than the cap, `overflow:auto` shows no
-   scrollbar and the box just sizes to its rows. */
-.gallery {
-  background: var(--panel); border: 1px solid var(--line);
-  border-radius: var(--radius); box-shadow: var(--shadow); position: relative;
-  max-height: var(--gallery-max, 640px); overflow: auto;
-}
+.gallery { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: relative; }
 .grid-head, .grow {
   display: grid;
   grid-template-columns: 52px minmax(200px, 1.3fr) 160px repeat(var(--ncol, 4), minmax(140px, 1fr));
@@ -569,98 +559,27 @@ function openModal(fxId, sub) {
   document.getElementById('modalNote').innerHTML =
     'CAD score for this sample: <b>' + cad + '</b>. The full per-sample report '
     + '(shape similarity, interface, topology + 3D view) opens from the report viewer.';
-  const back = document.getElementById('modalBack');
-  back.classList.add('show');
-  positionModalToView();
-  attachModalViewSync();
+  document.getElementById('modalBack').classList.add('show');
 }
 function closeModal() {
   document.getElementById('modalBack').classList.remove('show');
-  detachModalViewSync();
 }
 document.getElementById('modalClose').onclick = closeModal;
 document.getElementById('modalBack').onclick = (e) => { if (e.target.id === 'modalBack') closeModal(); };
 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
 
-// --- Modal positioning ----------------------------------------------------
-// The page lives in a srcdoc iframe sized to its full content (see fitIframe),
-// so a plain `position: fixed` overlay would anchor to the iframe's full
-// height and land far below the fold. Instead we pin the overlay to the part
-// of the iframe currently visible inside the parent viewport. srcdoc iframes
-// are same-origin with the embedding document, so frameElement / parent are
-// readable; everything is wrapped in try/catch and falls back to a fixed,
-// viewport-centred overlay if that access is ever blocked.
-function positionModalToView() {
-  const back = document.getElementById('modalBack');
-  try {
-    const fe = window.frameElement;
-    const pv = window.parent;
-    if (fe && pv) {
-      const rect = fe.getBoundingClientRect();        // iframe box in parent viewport
-      const docH = document.documentElement.scrollHeight;
-      const visTop = Math.max(0, -rect.top);          // iframe-doc y at top of view
-      const visBottom = Math.min(docH, -rect.top + pv.innerHeight);
-      if (visBottom > visTop) {
-        back.style.position = 'absolute';
-        back.style.left = '0';
-        back.style.right = '0';
-        back.style.bottom = 'auto';
-        back.style.top = visTop + 'px';
-        back.style.height = (visBottom - visTop) + 'px';
-        return;
-      }
-    }
-  } catch (e) { /* cross-origin / sandboxed -> fixed fallback below */ }
-  back.style.position = 'fixed';
-  back.style.top = '0'; back.style.left = '0';
-  back.style.right = '0'; back.style.bottom = '0';
-  back.style.height = '';
-}
-
-let _modalSync = null;
-function attachModalViewSync() {
-  try {
-    const pv = window.parent;
-    _modalSync = () => positionModalToView();
-    pv.addEventListener('scroll', _modalSync, { passive: true });
-    pv.addEventListener('resize', _modalSync);
-  } catch (e) { _modalSync = null; }
-}
-function detachModalViewSync() {
-  try {
-    const pv = window.parent;
-    if (_modalSync) {
-      pv.removeEventListener('scroll', _modalSync);
-      pv.removeEventListener('resize', _modalSync);
-    }
-  } catch (e) { /* ignore */ }
-  _modalSync = null;
-}
-
 // Pin the GT row exactly beneath the sticky column header.
 function syncHeadHeight() {
   const head = document.getElementById('gridHead');
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
-// Cap the scroll box at a fraction of the *visible* (parent) viewport so the
-// GT row + header lock while submissions scroll inside it, without making the
-// page tall. When the rows are shorter than the cap the box just sizes to them
-// (no scrollbar). Reads the parent viewport (same-origin srcdoc); no-ops to the
-// CSS px fallback if that access is blocked.
-function capGallery() {
-  try {
-    const pv = window.parent;
-    if (pv && pv.innerHeight) {
-      const cap = Math.max(360, Math.round(pv.innerHeight * 0.78));
-      document.documentElement.style.setProperty('--gallery-max', cap + 'px');
-    }
-  } catch (e) { /* keep CSS fallback */ }
-}
-
-// Size the iframe to its content so the page is as compact as the (capped)
-// gallery -- no oversized fixed box, no empty space when there are few rows.
-// No-ops if frameElement is unreadable (the wrapper then keeps its CSS height).
+// 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.
 function fitIframe() {
   try {
     const fe = window.frameElement;
@@ -669,11 +588,9 @@ function fitIframe() {
 }
 
 buildGallery();
-capGallery();
 fitIframe();
-function relayout() { syncHeadHeight(); capGallery(); fitIframe(); }
+function relayout() { syncHeadHeight(); fitIframe(); }
 window.addEventListener('resize', relayout);
-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);
 """