From 7c6c9fcd90cfa2f6e0a2a3d66ed50c9a2c1b840f Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 15 Jun 2026 20:03:57 +0330
Subject: [PATCH] fix(game): center the trick area in RTL (felt no longer
 overflows its container)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The felt was w-[min(96vw,560px)] inside a p-3 flex container; on phones 96vw
exceeds the padded width, and an overflowing flex item under justify-center in
an RTL layout pins to the start (right) and overflows left — so the trick area
(centered on the felt) drifted off-center. Added max-w-full to cap the felt to
its container so justify-center truly centers it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/GameTable.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/GameTable.tsx b/src/components/GameTable.tsx
index d105254..9db5bd7 100644
--- a/src/components/GameTable.tsx
+++ b/src/components/GameTable.tsx
@@ -186,7 +186,10 @@ export function GameTable({
 
       {/* Felt table — portrait proportions (tall, centered between HUD and hand) */}
       <div className="absolute inset-x-0 top-16 bottom-44 flex items-center justify-center p-3">
-        <div className="felt relative w-[min(96vw,560px)] h-full max-h-[680px] rounded-[44%]">
+        {/* max-w-full so the felt never exceeds its padded container — otherwise an
+            overflowing flex item under justify-center pins to the (RTL) start and
+            the trick area, centered on the felt, drifts off-center. */}
+        <div className="felt relative w-[min(96vw,560px)] max-w-full h-full max-h-[680px] rounded-[44%]">
           {/* opponent + partner seats */}
           <SeatAvatar seat={2} className="absolute top-3 left-1/2 -translate-x-1/2" />
           <SeatAvatar seat={1} className="absolute top-1/2 right-3 -translate-y-1/2" />