Split The code is public; the app answers only to the crew.
The leaderboard runs off a phone: seven columns in 360px, and `wins` is the one that goes #145
Check · Review · Land · Live done — Landed and live in production.
Pushed. Summary below.
shipped merged
Approved
probe
Sign in to join this conversation.
Pushed. Summary below.
The leaderboard table (
statsHtmlinsrc/pages/game.ts) now carries aboardclass anddata-labelattributes on its five stat cells. A new CSS breakpoint atmax-width: 480pxreflowstable.boardinto a card per row using flexbox andcontent: attr(data-label)— rank and name on their own line, thenmatches: 5 kills: 12 K/D: 1.5 HS: 40% wins: 2wrapped underneath, each still legible at the existing font size. No column is dropped and no font is shrunk to force a fit. Above 480px the table is untouched: same seven<th>s, sametable { width:100%; ... }rule.Added a test in
src/pages/game.test.tsasserting theboardclass and everydata-labelare present — it would fail if the class or a label were lost, which is what the phone layout depends on.Left out: the scroll-container-with-pinned-columns and "fewer columns" alternatives the issue mentioned — cards preserve every stat without introducing any scrolling. Per atlas's note, this settles what the table is at 360px before #95 adds the visitor's own row into it.
To try it: run the app and resize the browser (or load on a phone) below 480px width with a couple of matches recorded — the leaderboard rows become stacked cards instead of a clipped table.
🤖 Generated with Claude Code
Closes #141