leaderboard: reclaim Gradio chrome + responsive mobile gallery

- Hide the Gradio footer and tighten outer padding (the unused space
between Refresh and the footer) and grow the gallery box to use it, so
more rows fit in one viewport.
- Mobile: the 4-sample matrix no longer clips. On narrow screens the
table scrolls horizontally (swipe), the rank column is dropped, the
Submission column is frozen to the left, and the score breakdown is
hidden -- so the renders are actually visible and you can tell which
model each belongs to, with the header + GT row still pinned.

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

app.py

@@ -931,9 +931,21 @@ def _tasks_iframe_html() -> str:
     )
 
 
-with gr.Blocks(title="CADGenBench Leaderboard", theme=gr.themes.Soft()) as blocks:
+# Reclaim vertical space so the gallery can show more rows in one viewport:
+# hide the Gradio footer ("Built with Gradio - Settings") and tighten the
+# page's outer padding / inter-block gap. Scoped to cosmetics only.
+_APP_CSS = (
+    "footer{display:none !important;}"
+    ".gradio-container{padding-top:4px !important; padding-bottom:0 !important;}"
+    "#cgb-title{margin-bottom:0 !important;}"
+    "#cgb-title h3{margin:2px 0 !important;}"
+)
+
+with gr.Blocks(
+    title="CADGenBench Leaderboard", theme=gr.themes.Soft(), css=_APP_CSS,
+) as blocks:
     # Single compact title line (keeps vertical space for the gallery rows).
-    gr.Markdown("### CADGenBench Leaderboard")
+    gr.Markdown("### CADGenBench Leaderboard", elem_id="cgb-title")
 
     with gr.Tab("Leaderboard"):
         # Visual-first leaderboard. The bespoke surface (sticky GT row,

gallery.py

@@ -396,6 +396,39 @@ a.sub-name:hover { color: var(--accent); text-decoration: underline; }
 .modal-note a { color: var(--accent); font-weight: 600; }
 .modal-close { margin-top: 20px; width: 100%; padding: 11px; border: 1px solid var(--line-strong); background: #fafbfc; border-radius: 10px; font-family: inherit; font-weight: 600; cursor: pointer; font-size: 14px; }
 .modal-close:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
+
+/* --- Mobile / narrow screens ------------------------------------------------
+   The full 4-sample matrix is far wider than a phone, so on narrow viewports
+   the table scrolls horizontally (swipe) instead of being clipped, the rank
+   column is dropped, and the Submission column is frozen to the left so you can
+   tell which model each render belongs to while swiping. The header + GT row
+   stay frozen to the top as before, so the GT thumbnails are always the
+   reference while you scroll either way. */
+@media (max-width: 760px) {
+  .wrap { padding: 0 8px; }
+  .section-label { margin: 2px 0 6px; font-size: 12px; }
+  .gallery { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .grid-head, .grow {
+    grid-template-columns: 128px 78px repeat(var(--ncol, 4), 118px);
+  }
+  /* Drop the rank column (cells + header) to save width. */
+  .rank, .grid-head .h-rank { display: none; }
+  /* Freeze the identity / Submission column while swiping horizontally. */
+  .ident, .grid-head .h-sub {
+    position: sticky; left: 0; z-index: 8;
+    box-shadow: 6px 0 10px -8px rgba(20,22,28,.25);
+  }
+  .grid-head .h-sub { background: #fbfbfd; }
+  .grow.sub-row .ident { background: var(--panel); }
+  .grow.sub-row:hover .ident { background: #fafbff; }
+  .grow.gt-row .ident { background: var(--gt-soft); }
+  .ident .sub-name { font-size: 13.5px; }
+  .score-cell { padding: 12px 10px; }
+  .score-cell .agg { font-size: 19px; }
+  .score-cell .score-breakdown { display: none; }  /* keep the score column narrow */
+  .thumb-cell { padding: 5px; }
+  .scroll-cue { right: 1px; }
+}
 """
 
 
@@ -471,7 +504,7 @@ function groupLabel(task) { return task ? (task.charAt(0).toUpperCase() + task.s
 // --- Gallery render -------------------------------------------------------
 function buildHead() {
   const head = document.getElementById('gridHead');
-  let h = '<div>#</div><div>Submission</div><div>Score</div>';
+  let h = '<div class="h-rank">#</div><div class="h-sub">Submission</div><div class="h-score">Score</div>';
   FIXTURES.forEach(f => {
     const diff = f.difficulty
       ? '<span class="fdiff diff-' + esc((f.difficulty || '').toLowerCase()) + '">' + esc(f.difficulty) + '</span>'
@@ -632,7 +665,7 @@ function updateScrollCue() {
 // 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 = 520;
+var CHROME_RESERVE = 450;
 function sizeGalleryBox() {
   try {
     const avail = (window.screen && window.screen.availHeight) || 900;