chess: fit the board to the screen, side-by-side on landscape

[aaylward]

The board's fixed 100dvh - 19rem budget had fallen behind the chrome (score sheet, status, overlay padding), so play scrolled on most phones and on a 1280×800 desktop.

• The table fills the overlay; the board sits in a container-type: size slot and takes min(100cqw, 100cqh) of whatever the clocks, header and actions leave. 15rem floor, below which the overlay scrolls.
• Short landscape (≤500px tall): board on the left, everything else stacked on the right.

Overflow while playing (px, before → after), measured with Playwright against the table in the lobby overlay:

viewport	before	after
320×568	116	72 (floor)
360×640	91	0
375×667	79	0
390×844	0	0
844×390	257	0
667×375	272	14
1280×800	99	0

Layout is not covered by CI: vitest runs on jsdom, which does no layout. Existing suite passes (1286).

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	muchq	589d223	Commit Preview URL Branch Preview URL	Oct 01 2026, 02:55 AM

[cursor]

Blocking

None. Portrait path is sound: .table fills .tableOverlay, .play / .boardSlot flex to the leftover, board is min(100cqw, 100cqh) from a container-type: size slot, 15rem floor then scroll. Landscape display: contents on .play lets the board sit in column 1 while chrome auto-places in column 2; the 100dvh - 60px - 4.5rem square matches the overlay’s top offset and vertical padding. Playwright overflow table is the right evidence where jsdom cannot help. CI green.

Nits

• Landscape size repeats the overlay’s magic numbers (60px top, 3.5rem + 1rem padding as 4.5rem). A shared variable on .tableOverlay (and consumed here) would keep the next padding tweak from silently wrong-sizing the board.
• grid-row: 1 / span 6 is coupled to today’s chrome count (top, clocks, actions, …). A one-line comment that the span only has to cover the right-hand stack — or grid-row: 1 / -1 once the row count is explicit — would save a future layout hole when the ending/score sheet grows.
• Landscape calc ignores safe-area-inset-*; fine on the measured frames, tight on notched phones on their side.

Fine

Right fix for a budget that drifted behind the score sheet and padding: measure the slot instead of guessing 100dvh - 19rem. Side-by-side under 500px tall is the right special case. TSX is the boardSlot wrapper only. Merge when ready.

---

Review of #402

[aaylward]

Nits stay as is: they only start a push riding another change. Shared overlay vars and grid-row: 1 / -1 go in if this PR gets another code push; safe-area insets wait for a notched-landscape report.

---

Generated by Claude Code