leaderboard: bigger gallery box + scroll affordance

- Raise the box height cap (760->900) so larger screens use their
vertical space and show more rows, keeping the chrome reserve so it
still fits in one viewport (single scroll).
- Add a clear scroll affordance: a persistent (styled) scrollbar plus a
'scroll for more models' fade cue at the bottom that hides once the
list is scrolled to the end, and a caption note that the GT row stays
pinned.

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

gallery.py

@@ -261,6 +261,31 @@ body {
   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;
+  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
+}
+/* Keep the scrollbar visible (macOS overlay scrollbars otherwise hide it, so
+   it isn't obvious the rows scroll). */
+.gallery::-webkit-scrollbar { width: 11px; }
+.gallery::-webkit-scrollbar-track { background: transparent; }
+.gallery::-webkit-scrollbar-thumb {
+  background: var(--line-strong); border-radius: 8px; border: 2px solid var(--panel);
+}
+.gallery::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
+
+/* Affordance that there are more rows below: a fade + label pinned to the
+   bottom of the box, hidden by JS once scrolled to the end. */
+.gallery-shell { position: relative; }
+.scroll-cue {
+  position: absolute; left: 1px; right: 12px; bottom: 1px; height: 56px;
+  pointer-events: none; display: flex; align-items: flex-end; justify-content: center;
+  padding-bottom: 9px; border-radius: 0 0 var(--radius) var(--radius);
+  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--panel) 82%);
+}
+.scroll-cue[hidden] { display: none; }
+.scroll-cue span {
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
+  color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: 999px;
+  box-shadow: 0 1px 3px rgba(20,22,28,.12);
 }
 .grid-head, .grow {
   display: grid;
@@ -388,9 +413,13 @@ _BODY = """
     A fixed comparison sheet: <b>two generation</b> and <b>two editing</b> samples,
     one <b>Medium</b> and one <b>Hard</b> per task. Difficulty is fixed (picked from the
     Claude Opus 4.8 baseline's per-sample scores), so every visit shows the same columns.
+    <b>Scroll the table</b> to see all models &mdash; the ground-truth row stays pinned for comparison.
   </p>
-  <div class="gallery" id="gallery">
-    <div class="grid-head" id="gridHead"></div>
+  <div class="gallery-shell">
+    <div class="gallery" id="gallery">
+      <div class="grid-head" id="gridHead"></div>
+    </div>
+    <div class="scroll-cue" id="scrollCue" hidden><span>&#9662; scroll for more models</span></div>
   </div>
 </div>
 <div class="modal-back" id="modalBack">
@@ -585,6 +614,15 @@ function syncHeadHeight() {
   if (head) document.documentElement.style.setProperty('--head-h', head.offsetHeight + 'px');
 }
 
+// Show the "scroll for more" cue only while there are rows below the fold.
+function updateScrollCue() {
+  const g = document.getElementById('gallery');
+  const cue = document.getElementById('scrollCue');
+  if (!g || !cue) return;
+  const more = (g.scrollHeight - g.clientHeight - g.scrollTop) > 8;
+  cue.hidden = !more;
+}
+
 // 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
@@ -604,8 +642,9 @@ var CHROME_RESERVE = 620;
 function sizeGalleryBox() {
   try {
     const avail = (window.screen && window.screen.availHeight) || 900;
-    const h = Math.max(280, Math.min(760, Math.round(avail - CHROME_RESERVE)));
+    const h = Math.max(300, Math.min(900, Math.round(avail - CHROME_RESERVE)));
     document.documentElement.style.setProperty('--gallery-max', h + 'px');
+    updateScrollCue();
   } catch (e) { /* keep CSS fallback */ }
 }
 
@@ -623,7 +662,12 @@ function fitIframe() {
 buildGallery();
 sizeGalleryBox();
 fitIframe();
-function relayout() { syncHeadHeight(); sizeGalleryBox(); fitIframe(); }
+(function () {
+  const g = document.getElementById('gallery');
+  if (g) g.addEventListener('scroll', updateScrollCue, { passive: true });
+})();
+updateScrollCue();
+function relayout() { syncHeadHeight(); sizeGalleryBox(); fitIframe(); updateScrollCue(); }
 window.addEventListener('resize', relayout);
 if (window.ResizeObserver) new ResizeObserver(fitIframe).observe(document.body);
 if (document.fonts && document.fonts.ready) document.fonts.ready.then(relayout);