Last round I left a residual and said it wanted its own fix: on a phone held sideways, seats overlapped so badly that a seat's centre belonged to the seat next door. Here's the cause. Stacked on #60.
The landscape rule capped the felt's width by its height to hold the portrait aspect ratio. At 640x360 that produced a table 135px wide inside a 601px column — 22% of the screen — with 366px of rim for nine seats needing 662px. Adjacent seat centres ended up 13px apart for seats rendering 74px wide.
Landscape has width and no height, so the table now takes the width it has and is only as tall as the room left over. A wide ellipse, which is what a real poker table is anyway.
Viewport
Felt
Rim available
Closest centres
640x360
135x97 → 601x121
366 → 1263
13px → 33px
844x390
176x127 → 765x151
480 → 1605
37px → 59px
915x412
207x149 → 492x173
563 → 1106
44px → 55px
Seat ownership went from 8 seats wrong at 640x360 and 2 at 844x390 to zero at 844x390, zero at 915x412, and two at the very smallest. Nine of eleven sizes clean; portrait and desktop untouched.
Two things I tried and threw away
Spacing seats by arc length instead of by angle. It sounds obviously right — even distance around the rim rather than even angle — and it made things worse: 640x360 went from 2 wrong to 3, closest centres 33px → 21px, and even the desktop table dropped 180px → 155px. Even arc spacing packs seats through the tight turns at the ends of an ellipse, where a fixed distance along the rim covers much less straight-line distance. Equal angles happen to separate them better. Reverted.
Shrinking seats on the tightest landscape phones. Took the rendered seat 74px → 64px and moved closest centres not at all — still 33px — while the covered count at 844x390 went 3 → 4. A change that measures as nothing but costs CSS and legibility isn't worth keeping. Reverted.
So this PR is one CSS rule, which is all the measurements supported.
What's left
640x360 and 667x375 still have two seats whose centre lands on a neighbour. Nine seats on a ring 121px tall is a genuine physical constraint rather than a layout mistake, and both remaining fixes I tried made it worse. It's reported by the audit rather than hidden, and a dealer on a 360px-tall screen has the seat menu and action bar for everything that matters.
Validation
152 tests passing; contrast clean at every size; seat ownership measured at 9–12 viewports before and after; dealing still works in landscape (blinds posted, betting opened).
Last round I left a residual and said it wanted its own fix: on a phone held sideways, seats overlapped so badly that a seat's centre belonged to the seat next door. Here's the cause. Stacked on #60.
The landscape rule capped the felt's **width by its height** to hold the portrait aspect ratio. At 640x360 that produced a table **135px wide inside a 601px column** — 22% of the screen — with 366px of rim for nine seats needing 662px. Adjacent seat centres ended up **13px apart** for seats rendering 74px wide.
Landscape has width and no height, so the table now takes the width it has and is only as tall as the room left over. A wide ellipse, which is what a real poker table is anyway.
| Viewport | Felt | Rim available | Closest centres |
| --- | --- | --- | --- |
| 640x360 | 135x97 → **601x121** | 366 → **1263** | 13px → **33px** |
| 844x390 | 176x127 → **765x151** | 480 → **1605** | 37px → **59px** |
| 915x412 | 207x149 → **492x173** | 563 → **1106** | 44px → **55px** |
Seat ownership went from **8 seats wrong at 640x360 and 2 at 844x390** to zero at 844x390, zero at 915x412, and two at the very smallest. **Nine of eleven sizes clean**; portrait and desktop untouched.
## Two things I tried and threw away
**Spacing seats by arc length instead of by angle.** It sounds obviously right — even distance around the rim rather than even angle — and it made things *worse*: 640x360 went from 2 wrong to 3, closest centres 33px → 21px, and even the desktop table dropped 180px → 155px. Even arc spacing packs seats through the tight turns at the ends of an ellipse, where a fixed distance along the rim covers much less straight-line distance. Equal angles happen to separate them better. Reverted.
**Shrinking seats on the tightest landscape phones.** Took the rendered seat 74px → 64px and moved closest centres **not at all** — still 33px — while the covered count at 844x390 went 3 → 4. A change that measures as nothing but costs CSS and legibility isn't worth keeping. Reverted.
So this PR is **one CSS rule**, which is all the measurements supported.
## What's left
640x360 and 667x375 still have two seats whose centre lands on a neighbour. Nine seats on a ring 121px tall is a genuine physical constraint rather than a layout mistake, and both remaining fixes I tried made it worse. It's reported by the audit rather than hidden, and a dealer on a 360px-tall screen has the seat menu and action bar for everything that matters.
## Validation
152 tests passing; contrast clean at every size; seat ownership measured at 9–12 viewports before and after; dealing still works in landscape (blinds posted, betting opened).
Last round I left a residual and said it wanted its own fix: on a phone held
sideways, seats overlapped so badly that a seat's centre belonged to the seat next
door. Here's the cause.
The landscape rule capped the felt's width by its height to hold the portrait
aspect ratio. At 640x360 that produced a table 135px wide inside a 601px column --
22% of the screen -- with 366px of rim for nine seats needing 662px. Adjacent seat
centres ended up 13px apart for seats rendering 74px wide.
Landscape has width and no height, so the table now takes the width it has and is
only as tall as the room left over. A wide ellipse, which is what a real poker
table is anyway.
640x360 felt 135x97 -> 601x121 rim 366 -> 1263 centres 13px -> 33px
844x390 felt 176x127 -> 765x151 rim 480 -> 1605 centres 37px -> 59px
915x412 felt 207x149 -> 492x173 rim 563 -> 1106 centres 44px -> 55px
Seat ownership went from 8 seats wrong at 640x360 and 2 at 844x390 to zero at
844x390, zero at 915x412, and two at the very smallest. Nine of eleven sizes clean,
portrait and desktop untouched.
Two things I tried and threw away
Spacing seats by arc length instead of by angle. It sounds obviously right -- even
distance around the rim rather than even angle -- and it made things worse: 640x360
went from 2 wrong to 3, closest centres 33px to 21px, and even the desktop table
dropped from 180px to 155px. Even arc spacing packs seats through the tight turns
at the ends of an ellipse, where a fixed distance along the rim covers much less
straight-line distance. Equal angles happen to separate them better. Reverted.
Shrinking seats on the tightest landscape phones. Took the rendered seat from 74px
to 64px and moved closest centres not at all -- still 33px -- while the covered
count at 844x390 went from 3 to 4. A change that measures as nothing but costs CSS
and legibility isn't worth keeping. Reverted.
So this is one CSS rule, which is all the measurements supported.
What's left
640x360 and 667x375 still have two seats whose centre lands on a neighbour. Nine
seats on a ring 121px tall is a genuine physical constraint rather than a layout
mistake, and both remaining fixes I tried made it worse rather than better. It is
reported by the audit rather than hidden, and a dealer on a 360px-tall screen has
the seat menu and the action bar for everything that matters.
152 tests passing; contrast clean at every size; dealing still works in landscape.
Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheaps
merged commit edc08d7213 into feature/casino-holdem-seat-editor2026-09-01 10:57:01 -06:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Last round I left a residual and said it wanted its own fix: on a phone held sideways, seats overlapped so badly that a seat's centre belonged to the seat next door. Here's the cause. Stacked on #60.
The landscape rule capped the felt's width by its height to hold the portrait aspect ratio. At 640x360 that produced a table 135px wide inside a 601px column — 22% of the screen — with 366px of rim for nine seats needing 662px. Adjacent seat centres ended up 13px apart for seats rendering 74px wide.
Landscape has width and no height, so the table now takes the width it has and is only as tall as the room left over. A wide ellipse, which is what a real poker table is anyway.
Seat ownership went from 8 seats wrong at 640x360 and 2 at 844x390 to zero at 844x390, zero at 915x412, and two at the very smallest. Nine of eleven sizes clean; portrait and desktop untouched.
Two things I tried and threw away
Spacing seats by arc length instead of by angle. It sounds obviously right — even distance around the rim rather than even angle — and it made things worse: 640x360 went from 2 wrong to 3, closest centres 33px → 21px, and even the desktop table dropped 180px → 155px. Even arc spacing packs seats through the tight turns at the ends of an ellipse, where a fixed distance along the rim covers much less straight-line distance. Equal angles happen to separate them better. Reverted.
Shrinking seats on the tightest landscape phones. Took the rendered seat 74px → 64px and moved closest centres not at all — still 33px — while the covered count at 844x390 went 3 → 4. A change that measures as nothing but costs CSS and legibility isn't worth keeping. Reverted.
So this PR is one CSS rule, which is all the measurements supported.
What's left
640x360 and 667x375 still have two seats whose centre lands on a neighbour. Nine seats on a ring 121px tall is a genuine physical constraint rather than a layout mistake, and both remaining fixes I tried made it worse. It's reported by the audit rather than hidden, and a dealer on a 360px-tall screen has the seat menu and action bar for everything that matters.
Validation
152 tests passing; contrast clean at every size; seat ownership measured at 9–12 viewports before and after; dealing still works in landscape (blinds posted, betting opened).