leaderboard: dedicated mobile card layout for the gallery

A horizontal-scroll table is unusable on phones (one render at a time).
On narrow screens hide the table and render one card per model instead
(plus a ground-truth card), each showing the four renders in a labelled
2x2 grid, so the whole comparison reads top-to-bottom with a single
vertical scroll.

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

gallery.py

@@ -397,39 +397,51 @@ a.sub-name:hover { color: var(--accent); text-decoration: underline; }
 .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. */
+/* --- Mobile card layout (built by buildMobile) -----------------------------
+   The wide 4-sample matrix is unusable on a phone (one render at a time behind
+   a horizontal scroll). On narrow screens we hide the table entirely and show
+   one card per model instead, each with its four renders in a 2x2 grid, so the
+   whole comparison is readable with a single vertical scroll. */
+.m-cards { display: none; }
 @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);
+  .wrap { padding: 0 10px; }
+  .section-label { margin: 2px 0 4px; font-size: 12px; }
+  .gallery-shell { display: none; }      /* hide the desktop table */
+  .m-cards { display: block; }
+  .m-card {
+    background: var(--panel); border: 1px solid var(--line);
+    border-radius: var(--radius); box-shadow: var(--shadow);
+    padding: 13px 13px 14px; margin-bottom: 11px;
   }
-  /* Drop the rank column (cells + header) to save width. !important beats the
-     base `.grow.gt-row .rank` rule, which would otherwise re-show it on the GT
-     row only and wrap that row (7 items into a 6-column grid). */
-  .rank, .grid-head .h-rank { display: none !important; }
-  /* 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);
+  .m-card.m-gt { background: var(--gt-soft); border: 1px solid var(--gt); }
+  .m-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
+  .m-rank { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink-faint); }
+  .m-rank.medal-1 { color: #b8860b; } .m-rank.medal-2 { color: #6b7280; } .m-rank.medal-3 { color: #a0522d; }
+  .m-id { flex: 1; min-width: 0; }
+  .m-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; color: var(--ink); text-decoration: none; display: block; }
+  a.m-name:hover { color: var(--accent); }
+  .m-who { font-size: 11.5px; color: var(--ink-faint); font-family: var(--mono); }
+  .m-score { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
+  .m-val { font-size: 10.5px; font-family: var(--mono); font-weight: 700; color: var(--good); }
+  .m-val.imperfect { color: #b45309; }
+  .m-gt .m-name, .m-gt .m-score { color: var(--gt); }
+  .m-gt-sub { font-size: 11.5px; color: var(--gt); opacity: .8; }
+  .m-dl { font-size: 11.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
+  .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
+  .m-cell { margin: 0; }
+  .m-thumb {
+    aspect-ratio: 16/10; border-radius: 8px; background: var(--thumb-bg);
+    border: 1px solid var(--line); overflow: hidden;
   }
-  .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; }
+  .m-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
+  .m-thumb.failed { background: var(--bad-soft); border: 1px dashed #e9b3ae; display: flex; align-items: center; justify-content: center; }
+  .m-thumb.failed span { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--bad); text-transform: uppercase; text-align: center; line-height: 1.4; }
+  .m-cell figcaption {
+    font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em;
+    color: var(--ink-faint); font-weight: 700; margin: 5px 0 1px; text-align: center;
+  }
+  .m-cell figcaption .mc-diff { color: var(--bad); }
+  .m-cell figcaption .mc-diff.mc-medium { color: #b45309; }
 }
 """
 
@@ -450,6 +462,7 @@ _BODY = """
     </div>
     <div class="scroll-cue" id="scrollCue" hidden><span>&#9662; scroll for more models</span></div>
   </div>
+  <div class="m-cards" id="mGallery"></div>
 </div>
 <div class="modal-back" id="modalBack">
   <div class="modal">
@@ -604,6 +617,52 @@ function wireGallery() {
   });
 }
 
+// --- Mobile card layout ---------------------------------------------------
+// One card per model (plus a ground-truth card), each showing the four renders
+// in a 2x2 grid with labels. Built once; CSS shows it only on narrow screens.
+function mCaption(f) {
+  const diff = f.difficulty
+    ? ' <span class="mc-diff mc-' + esc((f.difficulty || '').toLowerCase()) + '">' + esc(f.difficulty) + '</span>'
+    : '';
+  return esc(groupLabel(f.task)) + diff;
+}
+function mThumb(url, f) {
+  const inner = url
+    ? '<img loading="lazy" decoding="async" src="' + url + '" alt="" onerror="mImgFail(this)">'
+    : '<span>invalid<br>generation</span>';
+  return '<figure class="m-cell"><div class="m-thumb' + (url ? '' : ' failed') + '">' + inner
+    + '</div><figcaption>' + mCaption(f) + '</figcaption></figure>';
+}
+function mImgFail(img) {
+  const t = img.closest('.m-thumb');
+  if (t) { t.className = 'm-thumb failed'; t.innerHTML = '<span>invalid<br>generation</span>'; }
+}
+function buildMobile() {
+  const root = document.getElementById('mGallery');
+  if (!root) return;
+  if (!DATA.subs.length) { root.innerHTML = ''; return; }
+  let html = '<div class="m-card m-gt">'
+    + '<div class="m-head"><div class="m-id"><span class="m-name">Ground truth</span>'
+    + '<span class="m-gt-sub">reference geometry</span></div><span class="m-score">1.000</span></div>'
+    + '<div class="m-grid">' + FIXTURES.map(f => mThumb(gtRenderFor(f.id), f)).join('') + '</div></div>';
+  DATA.subs.forEach((s, i) => {
+    const medal = i < 3 ? 'medal-' + (i + 1) : '';
+    const imperfect = (s.validity !== null && s.validity < 1) ? 'imperfect' : '';
+    const name = s.reportUrl
+      ? '<a class="m-name" href="' + esc(s.reportUrl) + '" target="_blank" rel="noopener">' + esc(s.name) + '</a>'
+      : '<span class="m-name">' + esc(s.name) + '</span>';
+    html += '<div class="m-card"><div class="m-head">'
+      + '<span class="m-rank ' + medal + '">' + (i + 1) + '</span>'
+      + '<div class="m-id">' + name + '<span class="m-who">' + esc(s.who) + '</span></div>'
+      + '<div style="text-align:right"><div class="m-score">' + fmt(s.score, 3) + '</div>'
+      + '<span class="m-val ' + imperfect + '">' + pct(s.validity) + ' valid</span></div></div>'
+      + '<div class="m-grid">' + FIXTURES.map(f => mThumb(gridRenderFor(s, f.id), f)).join('') + '</div>'
+      + (s.blobUrl ? '<div style="margin-top:9px"><a class="m-dl" href="' + esc(s.blobUrl) + '" target="_blank" rel="noopener">&#8675; Download ZIP</a></div>' : '')
+      + '</div>';
+  });
+  root.innerHTML = html;
+}
+
 function openModal(fxId, sub) {
   const f = fixtureMeta(fxId);
   const title = f
@@ -700,6 +759,7 @@ function fitIframe() {
 }
 
 buildGallery();
+buildMobile();
 sizeGalleryBox();
 fitIframe();
 (function () {