From 90070abb2e5a4b583c87f4733a61ef728cca3697 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Mon, 14 Sep 2026 19:24:59 -0400
Subject: [PATCH] feat(poker): contain-fit 4:3 felt sizing and fullscreen
 portal parity with blackjack

Co-authored-by: Sisyphus <sisyphus@ohmyopencode.dev>
---
 src/app/(frontend)/styles.css                 | 19 +++++++++++++------
 .../minigames/poker/PokerFeltCanvas.tsx       |  4 ++--
 .../minigames/poker/PokerGameTable.tsx        |  4 ++--
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/(frontend)/styles.css b/src/app/(frontend)/styles.css
index e8e683a..77c8a09 100644
--- a/src/app/(frontend)/styles.css
+++ b/src/app/(frontend)/styles.css
@@ -1402,13 +1402,20 @@
   bottom: auto;
 }
 
+/* Fullscreen contain-fit: absolute with zero insets + auto margins sizes the
+   felt to the largest 4:3 rectangle inside the viewport area (the same rules
+   browsers use for replaced elements), so it can never collapse to content
+   size and never overflow. Must stay after .poker-felt-table to win the
+   width tie. */
 .poker-felt-fullscreen {
-  min-height: max(76vh, 42rem);
-  border-radius: 50% / 48%;
-}
-
-.poker-felt-fullscreen::after {
-  border-radius: 50% / 46%;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 4 / 3;
 }
 
 .poker-seat-panel {
diff --git a/src/components/frontend/minigames/poker/PokerFeltCanvas.tsx b/src/components/frontend/minigames/poker/PokerFeltCanvas.tsx
index 718d756..a2d4e1c 100644
--- a/src/components/frontend/minigames/poker/PokerFeltCanvas.tsx
+++ b/src/components/frontend/minigames/poker/PokerFeltCanvas.tsx
@@ -114,8 +114,8 @@ export function PokerFeltCanvas({
     <div className="poker-table-stage">
       <div
         className={cn(
-          "poker-felt-table relative min-h-[36rem] overflow-hidden p-4 sm:min-h-[42rem]",
-          fullscreen && "poker-felt-fullscreen",
+          "poker-felt-table poker-felt relative aspect-[4/3] overflow-hidden p-4",
+          fullscreen ? "poker-felt-fullscreen" : "min-h-[40rem] w-full max-w-[56rem]",
         )}
       >
         {opponents.map((player: PublicPlayerView, opponentIndex) => {
diff --git a/src/components/frontend/minigames/poker/PokerGameTable.tsx b/src/components/frontend/minigames/poker/PokerGameTable.tsx
index 0590528..dee3478 100644
--- a/src/components/frontend/minigames/poker/PokerGameTable.tsx
+++ b/src/components/frontend/minigames/poker/PokerGameTable.tsx
@@ -121,7 +121,7 @@ export function PokerGameTable({
     if (!mounted) return null;
 
     return createPortal(
-      <div className="fixed inset-0 z-50 flex flex-col gap-3 overflow-auto bg-black/92 p-4 backdrop-blur-sm">
+      <div className="fixed inset-0 z-50 flex flex-col gap-3 overflow-hidden bg-black/92 p-4 backdrop-blur-sm">
         <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border border-white/15 bg-black/60 p-3 backdrop-blur-sm">
           <div className="flex min-w-0 items-center gap-2">
             <span className="truncate font-semibold text-white">{tableName}</span>
@@ -159,7 +159,7 @@ export function PokerGameTable({
             )}
           </div>
         </div>
-        {feltCanvas}
+        <div className="relative min-h-0 flex-1">{feltCanvas}</div>
       </div>,
       document.body,
     );