lay the invited tab out as the boards' 3x2 grid, tinted blue (#20)

- lay the invited tab out as the boards' 3x2 grid, tinted blue (a019dfb82302a3cb0e15ebda5a2ffc3b6d61aaba)

invited.py

@@ -18,51 +18,68 @@ import json
 
 import config
 
-# Sub-track order on the page. Fixed rather than file order, so a regenerated
-# shortlist cannot silently reorder what participants read.
-_ORDER = [(t, d) for t in config.TRACKS for d in config.DIVISIONS]
-
+# Order on the page comes from config.TRACKS / config.DIVISIONS at render time,
+# not from the shortlist file, so a regenerated shortlist cannot silently
+# reorder what participants read.
+#
 # Deliberately the same variables, fonts and border colours as results._DOC_CSS,
 # because this tab sits beside the two boards and a different table style reads
 # as a different system rather than a third view of the same data.
 CSS = """
-:root{--lb-border:#e4e1f0;--lb-text:#1b1830;--lb-sec:#6a6585;--lb-faint:#9b96b3;
---lb-head:#f6f5fc;--lb-hover:#faf9fe;
+:root{--lb-border:#cfe0f2;--lb-text:#1b1830;--lb-sec:#5a6b80;--lb-faint:#8ba0b8;
+--lb-surface:#f2f8ff;--lb-head:#e2eefb;--lb-hover:#e8f2fd;
 --lb-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --lb-sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif}
 *{box-sizing:border-box}
 html,body{margin:0;padding:0}
 body{font-family:var(--lb-sans);color:var(--lb-text);background:transparent;
      font-size:14px;padding:2px 0 12px}
-h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:1.5rem 0 .5rem;
-   padding-bottom:.4rem;border-bottom:2px solid var(--lb-border)}
-p.note{color:var(--lb-sec);font-size:.87rem;margin:.2rem 0 1.1rem;line-height:1.5}
-/* Fixed layout + a shared colgroup is what makes all six tables line up. With
-   auto layout each table sizes to its own longest cell, so the columns stepped
-   left and right between sub-tracks and it read as six unrelated tables. */
-table{border-collapse:collapse;width:100%;table-layout:fixed;
-      margin:.3rem 0 1.2rem;font-size:.87rem}
-th,td{border:1px solid var(--lb-border);padding:.4rem .6rem;text-align:left;
-      vertical-align:top}
-th{background:var(--lb-head);font-weight:600;white-space:nowrap}
-tbody tr:hover{background:var(--lb-hover)}
-/* Team, account and model WRAP: model_name is free text from participants and
-   reaches 80+ chars, so nowrap here is what pushed the table off the page. */
-td.team,td.acct,td.model{white-space:normal;overflow-wrap:anywhere}
-td.team{font-weight:600}
-td.acct,td.model{color:var(--lb-sec)}
-td.num,th.num{text-align:right;white-space:nowrap;
-              font-variant-numeric:tabular-nums;font-family:var(--lb-mono)}
-td.rank{text-align:right;color:var(--lb-faint);font-family:var(--lb-mono)}
-.selfrep{color:var(--lb-sec);font-weight:400;font-size:.85em}
-.empty{color:var(--lb-sec);font-style:italic}
+.lb-note{color:var(--lb-sec);font-size:.87rem;margin:.2rem 0 1.1rem;line-height:1.5}
+.lb-track{margin-top:1.6rem}
+.lb-track:first-of-type{margin-top:.2rem}
+.lb-track-name{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;
+  padding-bottom:.45rem;border-bottom:2px solid var(--lb-border);margin-bottom:.8rem}
+/* Same grid as the boards: 3 tracks down, Small|Large across. auto-fit with a
+   460px floor means a narrow viewport falls back to one board per row instead
+   of squeezing two unreadable ones. */
+.lb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:.8rem}
+.lb-board{min-width:0;background:var(--lb-surface);border:1px solid var(--lb-border);
+  border-radius:12px;overflow:hidden}
+.lb-board-head{padding:.6rem .9rem;border-bottom:1px solid var(--lb-border);
+  font-weight:600;font-size:.9rem;background:var(--lb-head)}
+.lb-board-head .n{color:var(--lb-sec);font-weight:400}
+.lb-scroll{overflow:auto;max-width:100%;overscroll-behavior:contain}
+table{width:100%;border-collapse:collapse;table-layout:auto;font-size:.83rem;
+  border:0;margin:0;background:var(--lb-surface)}
+th,td{padding-right:1.1rem}
+th:last-child,td:last-child{padding-right:.55rem}
+thead th{font-family:var(--lb-mono);font-size:.66rem;letter-spacing:.04em;
+  text-transform:uppercase;color:var(--lb-sec);font-weight:600;text-align:left;
+  padding:.45rem .55rem;border-bottom:1px solid var(--lb-border);
+  background:var(--lb-head);white-space:nowrap}
+tbody td{padding:.4rem .55rem;border-bottom:1px solid var(--lb-border);
+  color:var(--lb-text);white-space:nowrap;vertical-align:middle}
+tbody tr:last-child td{border-bottom:0}
+tbody tr:hover td{background:var(--lb-hover)}
+.lb-rank{font-family:var(--lb-mono);font-weight:600;color:var(--lb-sec)}
+/* Team and model are participant free text (model_name seen at 82 chars), so
+   they wrap inside a ch bound. Everything else stays on one line. */
+.lb-team{font-weight:600;white-space:normal;overflow-wrap:anywhere;max-width:14ch}
+.lb-acct{font-family:var(--lb-mono);font-size:.78rem;color:var(--lb-sec);
+  white-space:normal;overflow-wrap:anywhere;max-width:12ch}
+.lb-model{color:var(--lb-sec);font-size:.78rem;white-space:normal;
+  overflow-wrap:anywhere;max-width:22ch;line-height:1.3}
+.lb-score,.lb-params{font-family:var(--lb-mono);text-align:right}
+.lb-th-num{text-align:right}
+.lb-th-score{background:linear-gradient(rgba(31,111,196,.07),rgba(31,111,196,.07)),var(--lb-head)}
+.lb-score{background:linear-gradient(rgba(31,111,196,.05),rgba(31,111,196,.05))}
+.lb-selfrep{display:inline-block;font-family:var(--lb-sans);font-size:.6rem;
+  font-weight:600;text-transform:none;letter-spacing:0;padding:1px 5px;
+  border-radius:6px;background:#d6e8fa;color:#3c5a78}
+.lb-empty{padding:1.3rem;color:var(--lb-faint);font-style:italic;text-align:center;
+  font-size:.85rem}
 """
 
-# One colgroup for every table, so a column is in the same place in all six.
-COLS = ("<colgroup><col style='width:2.8rem'><col style='width:20%'>"
-        "<col style='width:15%'><col><col style='width:8.5rem'>"
-        "<col style='width:7rem'></colgroup>")
-
 # Same self-sizing contract as results.board_document(). Two things it must get
 # right, both learned there: measure the CONTENT wrapper for height, never
 # documentElement.scrollHeight, which is bounded below by the iframe viewport and
@@ -128,6 +145,44 @@ def _head() -> str:
     )
 
 
+def _board(st: dict, division: str, esc) -> str:
+    """One division's card: a heading, then that sub-track's ranked table."""
+    rows = _rows(st)
+    head = (f'<div class="lb-board-head">{esc(division.capitalize())} '
+            f'<span class="n">&mdash; {len(rows)} invited</span></div>')
+    if not rows:
+        return (f'<div class="lb-board">{head}'
+                f'<div class="lb-empty">No teams invited</div></div>')
+
+    metric = esc(str(st.get("primary_metric_label") or "Score"))
+    if st.get("primary_is_self_reported"):
+        metric += ' <span class="lb-selfrep">self-rep.</span>'
+
+    cells = []
+    for i, t in enumerate(rows, 1):
+        score = t.get("primary_score")
+        try:
+            score = f"{float(score):.4f}"
+        except (TypeError, ValueError):
+            score = "—"
+        params = t.get("total_params")
+        params = (f"{params / 1e9:g}B"
+                  if isinstance(params, (int, float)) and params else "—")
+        cells.append(
+            f'<tr><td class="lb-rank">{i}</td>'
+            f'<td class="lb-team">{esc(str(t.get("team_name") or ""))}</td>'
+            f'<td class="lb-acct">{esc(str(t.get("hf_user") or ""))}</td>'
+            f'<td class="lb-model">{esc(str(t.get("model_name") or ""))}</td>'
+            f'<td class="lb-score">{score}</td>'
+            f'<td class="lb-params">{esc(params)}</td></tr>')
+
+    return (f'<div class="lb-board">{head}<div class="lb-scroll"><table>'
+            f'<thead><tr><th>#</th><th>Team</th><th>Account</th><th>Model</th>'
+            f'<th class="lb-th-num lb-th-score">{metric}</th>'
+            f'<th class="lb-th-num">Params</th></tr></thead>'
+            f'<tbody>{"".join(cells)}</tbody></table></div></div>')
+
+
 def document(token: str | None) -> str:
     """The whole page, as a standalone HTML document for an iframe srcdoc.
 
@@ -140,7 +195,7 @@ def document(token: str | None) -> str:
     out = [_head(), "<div id='invroot'>"]
 
     if not rep or not rep.get("subtracks"):
-        out.append("<p class=empty>The invited teams have not been published "
+        out.append("<p class='lb-empty'>The invited teams have not been published "
                    "yet. They appear here once the shortlist is final.</p>")
         out.append(f"</div>{FIT_JS}</body></html>")
         return "".join(out)
@@ -154,48 +209,26 @@ def document(token: str | None) -> str:
     n_teams = rep.get("distinct_teams")
 
     across = f" across <b>{n_teams} teams</b>" if n_teams else ""
-    out.append(f"<p class=note><b>{total} seats</b>{across}. "
+    out.append(f"<p class='lb-note'><b>{total} seats</b>{across}. "
                "A team is invited per sub-track, so a team may appear in several. "
                "If your team is listed, register it in <b>Submit &rarr; Test &rarr; "
                "Step 1</b> to collect your registry credentials.</p>")
 
-    for key in _ORDER:
-        st = by_sub.get(key)
-        if st is None:
-            continue
-        rows = _rows(st)
-        label = st.get("track_label") or config.TRACK_LABELS.get(key[0], key[0])
-        metric = st.get("primary_metric_label") or "Score"
-        if st.get("primary_is_self_reported"):
-            metric += " <span class=selfrep>(self-rep.)</span>"
-        out.append(f"<h3>{esc(label)} / {esc(st['division'].capitalize())} "
-                   f"&mdash; {len(rows)} invited</h3>")
-        if not rows:
-            out.append("<p class=empty>No teams invited in this sub-track.</p>")
+    # One .lb-track per track, each holding a 2-up .lb-grid of Small | Large,
+    # so the six sub-tracks lay out 3 down by 2 across. Same structure and class
+    # names as results._boards_inner(), so this reads as a third view of the
+    # boards rather than a different page.
+    for track in config.TRACKS:
+        boards = [_board(by_sub[(track, d)], d, esc)
+                  for d in config.DIVISIONS if (track, d) in by_sub]
+        if not boards:
             continue
-        out.append(f"<table>{COLS}<thead><tr><th class=num>#</th><th>Team</th>"
-                   "<th>HF account</th>"
-                   f"<th>Model</th><th class=num>{metric}</th>"
-                   "<th class=num>Total params</th></tr></thead><tbody>")
-        for i, t in enumerate(rows, 1):
-            score = t.get("primary_score")
-            try:
-                score = f"{float(score):.4f}"
-            except (TypeError, ValueError):
-                score = "—"
-            params = t.get("total_params")
-            params = (f"{params/1e9:g}B"
-                      if isinstance(params, (int, float)) and params else "—")
-            out.append(
-                f"<tr><td class=rank>{i}</td>"
-                f"<td class=team>{esc(str(t.get('team_name') or ''))}</td>"
-                f"<td class=acct>{esc(str(t.get('hf_user') or ''))}</td>"
-                f"<td class=model>{esc(str(t.get('model_name') or ''))}</td>"
-                f"<td class=num>{score}</td>"
-                f"<td class=num>{esc(params)}</td></tr>")
-        out.append("</tbody></table>")
-
-    out.append("<p class=note>Ranked by each sub-track's own validation metric, "
+        label = config.TRACK_LABELS.get(track, track)
+        out.append(f'<div class="lb-track"><div class="lb-track-name">'
+                   f'{esc(str(label))}</div>'
+                   f'<div class="lb-grid">{"".join(boards)}</div></div>')
+
+    out.append("<p class='lb-note'>Ranked by each sub-track's own validation metric, "
                "open-weight entries only, deduplicated by team. Scores are the "
                "validation results already shown on the Validation board.</p>")
     out.append(f"</div>{FIT_JS}</body></html>")

tests/test_invited.py

@@ -15,6 +15,7 @@ from unittest import mock
 
 sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 
+import config  # noqa: E402
 import invited  # noqa: E402
 
 
@@ -51,6 +52,25 @@ def _report(n_subtracks=2, rows_per=3, note_rows=0):
             "subtracks": subs}
 
 
+def _full_report():
+    """Every real (track, division), so the grid shape can be asserted."""
+    subs = []
+    for t in config.TRACKS:
+        for d in config.DIVISIONS:
+            subs.append({
+                "track": t, "division": d,
+                "track_label": config.TRACK_LABELS.get(t, t),
+                "primary_metric_label": "Accuracy",
+                "primary_is_self_reported": False,
+                "shortlist": [{
+                    "rank": 1, "team_name": f"{t}-{d}", "hf_user": "u",
+                    "model_name": "m", "primary_score": 0.5,
+                    "total_params": 7_000_000_000,
+                }],
+            })
+    return {"distinct_teams": 6, "total_seats": len(subs), "subtracks": subs}
+
+
 def _doc(rep):
     with mock.patch.object(invited, "load_shortlist_report", lambda t: rep):
         return invited.document(None)
@@ -107,20 +127,57 @@ class SelfSizingTest(unittest.TestCase):
             self.assertIn(f"addEventListener('{hook}',fit)", d)
 
 
-class ColumnsLineUpTest(unittest.TestCase):
-    def test_every_table_carries_the_same_colgroup(self):
-        d = _doc(_report(n_subtracks=2))
-        self.assertEqual(2, d.count("<table>"))
-        self.assertEqual(d.count("<table>"), d.count(invited.COLS))
+class GridLayoutTest(unittest.TestCase):
+    """Re-pointed 2026-08-08 from a flat one-table-per-sub-track page.
+
+    Six full-width tables stacked vertically did not match the Validation tab
+    and read as six unrelated tables. The layout is now the boards' own: one
+    .lb-track per track, each holding a 2-up .lb-grid of Small | Large, so the
+    six sub-tracks sit 3 down by 2 across.
+    """
 
-    def test_the_layout_is_fixed_so_widths_cannot_be_content_driven(self):
+    def test_one_track_section_per_track_not_one_per_sub_track(self):
+        d = _doc(_full_report())
+        self.assertEqual(len(config.TRACKS), d.count('class="lb-track"'))
+        self.assertEqual(len(config.TRACKS), d.count('class="lb-grid"'))
+
+    def test_each_track_holds_one_board_per_division(self):
+        d = _doc(_full_report())
+        n = len(config.TRACKS) * len(config.DIVISIONS)
+        self.assertEqual(n, d.count('class="lb-board"'))
+        self.assertEqual(n, d.count("<table>"))
+
+    def test_the_grid_is_two_up_and_falls_back_to_one_when_narrow(self):
+        d = _doc(_full_report())
+        self.assertIn("grid-template-columns:repeat(auto-fit", d)
+        self.assertIn("minmax(min(100%,460px),1fr)", d)
+
+    def test_it_uses_the_same_class_names_as_the_boards(self):
+        """Divergent markup here is how the two views drift apart visually.
+
+        results.py is read as TEXT rather than imported: importing it pulls in
+        pandas, which made this test fail on any interpreter without it, for a
+        reason that has nothing to do with the property being checked.
+        """
+        here = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+        with open(os.path.join(here, "results.py"), encoding="utf-8") as fh:
+            board_src = fh.read()
+        for cls in ("lb-track", "lb-track-name", "lb-grid", "lb-board",
+                    "lb-board-head", "lb-scroll", "lb-rank", "lb-team",
+                    "lb-model"):
+            self.assertIn(cls, board_src, f"{cls} is not a board class")
+            self.assertIn(cls, invited.CSS, f"{cls} missing here")
+
+    def test_the_tables_are_tinted_blue(self):
         d = _doc(_report())
-        self.assertIn("table-layout:fixed", d)
+        self.assertIn("--lb-surface:#f2f8ff", d)
+        self.assertIn("--lb-head:#e2eefb", d)
+        self.assertIn("background:var(--lb-surface)", d)
 
     def test_long_free_text_wraps_rather_than_widening_the_table(self):
         """model_name is participant free text and reaches 80+ chars."""
         d = _doc(_report())
-        self.assertIn("td.team,td.acct,td.model{white-space:normal", d)
+        self.assertIn(".lb-team{font-weight:600;white-space:normal", d)
         self.assertIn("overflow-wrap:anywhere", d)