leaderboard: lock GT row + header in a capped gallery scroll box

Make the gallery a scroll container capped at ~78% of the visible
viewport so the column header and ground-truth row stay pinned (sticky)
at the top while submissions scroll inside it. The cap is set from the
parent viewport in JS and the iframe is sized to the (bounded) content,
so the page stays compact and shows no scrollbar when the rows are
shorter than the cap.

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

gallery.py

@@ -250,7 +250,17 @@ 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; }
+/* 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;
+}
 .grid-head, .grow {
   display: grid;
   grid-template-columns: 52px minmax(200px, 1.3fr) 160px repeat(var(--ncol, 4), minmax(140px, 1fr));
@@ -633,9 +643,24 @@ function syncHeadHeight() {
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
-// Size the iframe to its content so the page scrolls naturally in the parent
-// (no oversized fixed-height box, no nested scrollbar). No-ops if frameElement
-// is unreadable (the wrapper then keeps its CSS fallback height).
+// 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).
 function fitIframe() {
   try {
     const fe = window.frameElement;
@@ -644,8 +669,11 @@ function fitIframe() {
 }
 
 buildGallery();
+capGallery();
 fitIframe();
-window.addEventListener('resize', () => { syncHeadHeight(); fitIframe(); });
+function relayout() { syncHeadHeight(); capGallery(); 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(() => { syncHeadHeight(); fitIframe(); });
+if (document.fonts && document.fonts.ready) document.fonts.ready.then(relayout);
 """