diff --git a/JoshHeaps.Net/wwwroot/css/casino/holdem.css b/JoshHeaps.Net/wwwroot/css/casino/holdem.css index 3fb5756..8b31fb5 100644 --- a/JoshHeaps.Net/wwwroot/css/casino/holdem.css +++ b/JoshHeaps.Net/wwwroot/css/casino/holdem.css @@ -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 ----------