Let the landscape table use the width it has

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
2026-09-01 10:39:45 -06:00
parent e01d8e7c49
commit 0c6cd55951
1 changed files with 14 additions and 2 deletions
@@ -2808,9 +2808,20 @@ body.hasActionBar #toastHost {
       against the containing block's width, not the element's own, so narrowing the
       wrap on its own left it full height regardless. */
    #pokerTableWrap {
-        --feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 8.5rem);
-        width: min(100%, calc(var(--feltRoom) / 0.72));
+        /* A wide ellipse, which is what a real poker table is.
+        
+           Capping the width by the height to hold the portrait aspect ratio was
+           throwing away most of the screen: at 640x360 the felt came out 135px wide
+           inside a 601px column — 22% of the width — leaving 366px of rim for nine
+           seats that need 662px. Adjacent seat centres ended up 13px apart, which is
+           why a seat's centre belonged to its neighbour.
+        
+           Landscape has width and no height, so the table takes the width it has and
+           is only as tall as the room left over. */
+        --feltRoom: calc(100vh - var(--actionBarHeight, 0px) - 7rem);
+        width: 100%;
        height: var(--feltRoom);
+        min-height: 7rem;
        padding-bottom: 0;
    }

@@ -2847,6 +2858,7 @@ body.hasActionBar #toastHost {
        width: 62px;
        min-height: 40px;
    }
+
 }

 /* ---------- Short phones, upright ----------