leaderboard: mobile uses the same aligned table as desktop

Revert the mobile card layout (it broke the GT-vs-output comparison by
putting GT in its own card). On phones now show the same table: sticky
sample-column headers + pinned ground-truth row, with each model's four
renders aligned in the same columns directly under the GT. To fit phone
width the per-model name+score becomes a slim bar above that model's
render row (no room for a left identity column plus four renders). The
box still caps + scrolls internally so the GT row stays pinned.

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

gallery.py

@@ -394,54 +394,45 @@ a.sub-name:hover { color: var(--accent); text-decoration: underline; }
 .modal-compare .mthumb.failed span { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .04em; text-align: center; }
 .modal-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); background: var(--accent-soft); padding: 12px 14px; border-radius: 10px; }
 .modal-note a { color: var(--accent); font-weight: 600; }
+/* Edit-diff color key (editing fixtures only), mirrors the report legend. */
+.modal-legend { margin-top: 9px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.7; }
+.modal-legend .mlc { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
+                     vertical-align: middle; margin: 0 5px 0 14px; border: 1px solid rgba(0,0,0,0.18); }
+.modal-legend .mlc:first-child { margin-left: 0; }
 .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 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; }
+/* --- Mobile / narrow screens ------------------------------------------------
+   Same comparison as desktop -- the four sample columns with the ground-truth
+   row pinned on top so each model's render sits directly under the GT it should
+   match -- but adapted to phone width: there is no room for a left identity
+   column AND four renders, so the model name + score become a slim bar above
+   that model's four renders. The four columns stay full-width and aligned
+   across the GT row and every model, and the header + GT row stay pinned. */
 @media (max-width: 760px) {
-  .wrap { padding: 0 10px; }
+  .wrap { padding: 0 7px; }
   .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;
-  }
-  .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;
-  }
-  .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; }
+  .grid-head, .grow { grid-template-columns: repeat(var(--ncol, 4), 1fr); }
+
+  /* Header: keep only the four sample-column labels, aligned over the renders. */
+  .grid-head .h-rank, .grid-head .h-sub, .grid-head .h-score { display: none !important; }
+  .grid-head .fix-h { padding: 8px 4px; }
+  .grid-head .fix-h .fname { display: none; }        /* drop the #id, keep task+difficulty */
+  .grid-head .fix-h .ftop { flex-direction: column; align-items: flex-start; gap: 3px; }
+  .grid-head .fix-h .ftask { font-size: 10px; }
+  .grid-head .fix-h .fdiff { font-size: 8px; padding: 1px 5px; }
+
+  /* Rows: name (3 cols) + score (last col) form a bar above the renders. */
+  .rank { display: none !important; }
+  .ident { grid-column: 1 / span 3; padding: 9px 8px 5px; }
+  .ident .sub-name { font-size: 13.5px; }
+  .ident .ident-foot { margin-top: 3px; }
+  .score-cell { grid-column: 4 / span 1; padding: 9px 8px 5px; gap: 1px; align-items: flex-end; }
+  .score-cell .agg { font-size: 17px; }
+  .score-cell .score-breakdown { display: none; }
+  .score-cell .validity { font-size: 10px; }
+  .grow.gt-row .score-cell { align-items: flex-end; }
+  .thumb-cell { padding: 4px; }
 }
 """
 
@@ -462,7 +453,6 @@ _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">
@@ -617,76 +607,50 @@ 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 isEditing = !!(f && f.task === 'editing');
   const title = f
     ? groupLabel(f.task) + (f.difficulty ? ' \\u00b7 ' + f.difficulty : '') + ' (#' + fxId + ')'
     : fxId;
   document.getElementById('modalTitle').textContent = title;
   document.getElementById('modalSub').textContent = sub.name;
   const gt = gtRenderFor(fxId);
-  const out = renderFor(sub, fxId);
+  // Editing fixtures: the meaningful output is the edit-diff turntable (the
+  // material that actually changed vs GT), mirroring the per-submission report
+  // -- the plain aligned candidate looks identical to GT for a small edit.
+  // Generation shows the plain aligned candidate.
+  const out = isEditing ? gridRenderFor(sub, fxId) : renderFor(sub, fxId);
   const cell = cellOf(sub, fxId);
   document.getElementById('modalGt').innerHTML = gt
     ? '<img src="' + gt + '" alt="ground truth">' : '<span>no GT render</span>';
+  document.getElementById('modalOutCap').textContent =
+    isEditing ? 'Output vs ground truth (edit diff)' : 'Output (aligned)';
   const outEl = document.getElementById('modalOut');
   if (out) {
     outEl.className = 'mthumb';
-    outEl.innerHTML = '<img src="' + out + '" alt="output">';
+    outEl.innerHTML = '<img src="' + out + '" alt="' + (isEditing ? 'edit diff' : 'output') + '">';
   } else {
     outEl.className = 'mthumb failed';
     outEl.innerHTML = '<span>invalid<br>generation</span>';
   }
   const cad = (cell.cad === null || cell.cad === undefined) ? '-' : Number(cell.cad).toFixed(3);
+  const legend = isEditing
+    ? '<div class="modal-legend">'
+      + '<span class="mlc" style="background:#bdc4d1"></span>your output'
+      + '<span class="mlc" style="background:#e62929"></span>extra material (too much)'
+      + '<span class="mlc" style="background:#f5991a"></span>missing material (too little)'
+      + '</div>'
+    : '';
   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.';
+    'CAD score for this sample: <b>' + cad + '</b>. '
+    + (isEditing
+        ? 'The right view is the edit diff: red is material your output added that the '
+          + 'GT lacks, amber is GT material your output is missing. '
+        : '')
+    + 'The full per-sample report (shape similarity, interface, topology + 3D view) '
+    + 'opens from the report viewer.' + legend;
   document.getElementById('modalBack').classList.add('show');
 }
 function closeModal() {
@@ -729,19 +693,17 @@ function updateScrollCue() {
 var CHROME_RESERVE = 450;
 function sizeGalleryBox() {
   try {
-    // Phones: drop the vertical cap entirely. Mobile browser + HF chrome eat
-    // most of the short viewport, so a capped box would be tiny AND still
-    // double-scroll. Instead let the gallery take its natural height and the
-    // page scroll once vertically; fixtures are reached by horizontal swipe
-    // (overflow-x). Width (unlike height) is not inflated by the nesting, so
-    // innerWidth is a reliable mobile check.
-    if ((window.innerWidth || 1000) < 760) {
-      document.documentElement.style.setProperty('--gallery-max', 'none');
-      updateScrollCue();
-      return;
-    }
     const avail = (window.screen && window.screen.availHeight) || 900;
-    const h = Math.max(320, Math.min(1200, Math.round(avail - CHROME_RESERVE)));
+    // Phones have much taller browser + HF chrome, so they need a bigger
+    // reserve (smaller box). Width is not inflated by the iframe nesting, so
+    // innerWidth is a reliable narrow-screen check. The box still caps + scrolls
+    // internally on mobile so the GT row + sample headers stay pinned and each
+    // model's renders sit under the matching GT render (same as desktop).
+    const narrow = (window.innerWidth || 1000) < 760;
+    const reserve = narrow ? 360 : CHROME_RESERVE;
+    const maxH = narrow ? 560 : 1200;
+    const minH = narrow ? 280 : 320;
+    const h = Math.max(minH, Math.min(maxH, Math.round(avail - reserve)));
     document.documentElement.style.setProperty('--gallery-max', h + 'px');
     updateScrollCue();
   } catch (e) { /* keep CSS fallback */ }
@@ -759,7 +721,6 @@ function fitIframe() {
 }
 
 buildGallery();
-buildMobile();
 sizeGalleryBox();
 fitIframe();
 (function () {