lay the invited tab out as the boards' 3x2 grid, tinted blue

Six full-width tables stacked vertically did not match the Validation tab and read as six unrelated tables.

Now the boards' own layout and class names: 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 in rounded cards with a scroll container. auto-fit with a 460px floor drops to one card per row on a narrow viewport rather than squeezing two unreadable ones.

Table surfaces are tinted light blue (#f2f8ff, headers #e2eefb) so the tab is distinguishable from the two white boards beside it while keeping the same type, borders and spacing.

19 tests, and four negative controls each biting only its own test: flat tables restored, tint reverted to white, content wrapper removed, documentElement restored. One test imported results.py just to compare class names, which pulled in pandas and failed on any interpreter without it; it reads the source as text now and passes under both interpreters.

Renders 3 track sections, 6 cards, 70 rows against the live shortlist, all tags balanced, htranx filtered.

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)