Make the dealer table usable on a phone #16

Merged
jheaps merged 3 commits from feature/casino-holdem-mobile-table into feature/casino-holdem-quick-split 2026-08-31 18:31:53 -06:00
Owner

Polish pass on the existing dealer table for phone-sized screens. No new capabilities.

Seats stayed on screen. The seat ring is drawn on a radius measured from the table wrap, so at phone width the left- and right-most seats hung off the edge of the viewport — at a ten-handed table two players were simply not visible. The ring is now inset by half a puck on phones, and the pucks are narrower there so neighbours stop overlapping where the ring flattens at the top and bottom.

The seat editor became a bottom sheet. Tapping a seat used to open a form far enough down the page that it looked like nothing happened. It now slides up over the table with a grip and a Done button, the table stays visible above it, and tapping the same seat again dismisses it.

Thumb-sized controls in the sheet. The seat form was sized for a 320px desktop sidebar. In the sheet everything is 44px+, and every field is 16px — below that iOS zooms the page on focus and the dealer has to pinch back out mid-hand.

Header actions become full-width tap targets and page padding tightens to give the table its width. Nothing above 700px changes.

Validated with Playwright. Measured rather than eyeballed: at 320px and 390px with a full ten-handed table, zero seats off screen (was 2) and no horizontal page overflow; worst puck overlap down from 572px² to 135px² — a corner touch. Verified the sheet opens on seat tap, closes via Done and via re-tapping the seat, and that its controls are 44px+ at 16px type. Confirmed the desktop layout is byte-for-byte unaffected (panel still static in the sidebar, grip and Done hidden) and checked the 700/760px boundary where the sheet switches off. Pot wizard checked at phone width too. No console errors.

Based on feature/casino-holdem-quick-split (PR #15), which is based on PR #14 — merge order is #14, #15, then this.

Polish pass on the existing dealer table for phone-sized screens. No new capabilities. **Seats stayed on screen.** The seat ring is drawn on a radius measured from the table wrap, so at phone width the left- and right-most seats hung off the edge of the viewport — at a ten-handed table two players were simply not visible. The ring is now inset by half a puck on phones, and the pucks are narrower there so neighbours stop overlapping where the ring flattens at the top and bottom. **The seat editor became a bottom sheet.** Tapping a seat used to open a form far enough down the page that it looked like nothing happened. It now slides up over the table with a grip and a Done button, the table stays visible above it, and tapping the same seat again dismisses it. **Thumb-sized controls in the sheet.** The seat form was sized for a 320px desktop sidebar. In the sheet everything is 44px+, and every field is 16px — below that iOS zooms the page on focus and the dealer has to pinch back out mid-hand. Header actions become full-width tap targets and page padding tightens to give the table its width. Nothing above 700px changes. **Validated with Playwright.** Measured rather than eyeballed: at 320px and 390px with a full ten-handed table, zero seats off screen (was 2) and no horizontal page overflow; worst puck overlap down from 572px² to 135px² — a corner touch. Verified the sheet opens on seat tap, closes via Done and via re-tapping the seat, and that its controls are 44px+ at 16px type. Confirmed the desktop layout is byte-for-byte unaffected (panel still static in the sidebar, grip and Done hidden) and checked the 700/760px boundary where the sheet switches off. Pot wizard checked at phone width too. No console errors. Based on `feature/casino-holdem-quick-split` (PR #15), which is based on PR #14 — merge order is #14, #15, then this.
jheaps added 1 commit 2026-08-31 18:11:26 -06:00
Two things were broken on a narrow screen. The seat ring is drawn on a radius
measured from the table wrap, so at phone width the left- and right-most seats
hung off the edge of the viewport — at a ten-handed table two players were
simply not on screen. And tapping a seat opened an editor far enough down the
page that it looked like nothing had happened.

The ring is now inset by half a puck on phones, which keeps every seat on
screen, and the pucks are narrower there so neighbours stop overlapping where
the ring flattens out at the top and bottom. The seat editor becomes a bottom
sheet that slides up over the table: grip, Done button, tap the same seat again
to dismiss, table still visible above it. Its controls grow to thumb size, and
every field goes to 16px — below that iOS zooms the page on focus and the
dealer has to pinch back out mid-hand.

Header actions become full-width tap targets, and the page padding tightens to
give the table the width it needs. Nothing above 700px changes.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheaps added 2 commits 2026-08-31 18:31:42 -06:00
Three system confirm() dialogs sat in the middle of dealing. The worst was on
Next Hand — the most-pressed button in a session, asking "are you sure?" every
single time, stealing focus and, on a phone, taking over the screen.

Next Hand now just happens, and a toast says where the button landed with an
Undo beside it for the few seconds anyone would notice a misclick. The same
undo covers the pot wizard, which is the more valuable case: paying the wrong
player is a real mistake, and rolling it back restores the hand history entry
and the session standings along with the seats. The snapshot is in-memory only
— an undo is for the mistake you just made, not one from last night.

The two genuinely destructive actions keep a confirmation, but as an in-page
dialog that matches the table instead of the browser's own: Escape or the
backdrop cancels, Enter confirms, and on a phone the buttons go full width with
Cancel nearest the thumb.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
Reviewed-on: #17
jheaps merged commit 4afc3649cc into feature/casino-holdem-quick-split 2026-08-31 18:31:53 -06:00
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jheaps/JoshHeaps.Net#16