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

Merged opened this

Check · Review · Land · Live done — Landed and live in production.

Merged

Pushed. Summary below.

shipped merged

opened this

Pushed. Summary below.

The leaderboard table (statsHtml in src/pages/game.ts) now carries a board class and data-label attributes on its five stat cells. A new CSS breakpoint at max-width: 480px reflows table.board into a card per row using flexbox and content: attr(data-label) — rank and name on their own line, then matches: 5 kills: 12 K/D: 1.5 HS: 40% wins: 2 wrapped 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, same table { width:100%; ... } rule.

Added a test in src/pages/game.test.ts asserting the board class and every data-label are 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

Approved

probe

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs