From c4513f7b0c894d773d42d8e1797bbcf92da1d20f Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 8 Jun 2026 07:46:20 +0330
Subject: [PATCH] Mobile: make in-game/post-match overlays scroll-safe on short
 screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GameTable Backdrop (Hakem/Trump/Round/Match-over): scroll when taller than the
  viewport via overflow-y-auto + min-h-full centering — no more clipped panels.
- DailyRewardModal: cap height + scroll (was overflow-hidden, clipped the 7-day grid).
- PostMatchRewardsModal: max-h uses dvh (mobile chrome safe).
- ScreenShell: add overflow-x-hidden so a too-wide child can't scroll horizontally.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/GameTable.tsx                    | 5 +++--
 src/components/online/DailyRewardModal.tsx      | 2 +-
 src/components/online/PostMatchRewardsModal.tsx | 2 +-
 src/components/online/ScreenHeader.tsx          | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/GameTable.tsx b/src/components/GameTable.tsx
index 04ca1f5..e405e36 100644
--- a/src/components/GameTable.tsx
+++ b/src/components/GameTable.tsx
@@ -900,9 +900,10 @@ function Backdrop({ children }: { children: React.ReactNode }) {
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="absolute inset-0 z-40 flex items-center justify-center bg-navy-950/70 backdrop-blur-sm p-5"
+      className="absolute inset-0 z-40 overflow-y-auto overscroll-contain bg-navy-950/70 backdrop-blur-sm"
     >
-      {children}
+      {/* min-h-full + centering: centers short panels, scrolls tall ones (no clip). */}
+      <div className="flex min-h-full items-center justify-center p-4 py-8">{children}</div>
     </motion.div>
   );
 }
diff --git a/src/components/online/DailyRewardModal.tsx b/src/components/online/DailyRewardModal.tsx
index f05a53c..bc3f3f3 100644
--- a/src/components/online/DailyRewardModal.tsx
+++ b/src/components/online/DailyRewardModal.tsx
@@ -72,7 +72,7 @@ export function DailyRewardModal() {
             exit={{ scale: 0.9, opacity: 0 }}
             transition={{ type: "spring", stiffness: 220, damping: 20 }}
             onClick={(e) => e.stopPropagation()}
-            className="glass rounded-3xl p-7 w-full max-w-sm text-center relative overflow-hidden"
+            className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[88dvh] overflow-y-auto overflow-x-hidden"
           >
             {/* gold glow */}
             <div className="pointer-events-none absolute -inset-10 bg-gold-500/10 blur-3xl" />
diff --git a/src/components/online/PostMatchRewardsModal.tsx b/src/components/online/PostMatchRewardsModal.tsx
index 0d12bf7..3126b91 100644
--- a/src/components/online/PostMatchRewardsModal.tsx
+++ b/src/components/online/PostMatchRewardsModal.tsx
@@ -83,7 +83,7 @@ export function PostMatchRewardsModal({
         initial={{ scale: 0.82, y: 28 }}
         animate={{ scale: 1, y: 0 }}
         transition={{ type: "spring", stiffness: 200, damping: 18 }}
-        className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[90vh] overflow-y-auto overflow-x-hidden"
+        className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[88dvh] overflow-y-auto overflow-x-hidden"
       >
         {/* radiating bg glow */}
         <div
diff --git a/src/components/online/ScreenHeader.tsx b/src/components/online/ScreenHeader.tsx
index 93197dd..4ff64e0 100644
--- a/src/components/online/ScreenHeader.tsx
+++ b/src/components/online/ScreenHeader.tsx
@@ -42,7 +42,7 @@ export function ScreenShell({ children }: { children: React.ReactNode }) {
     // Fixed-height viewport scroller: body is `overflow:hidden` (for the game
     // table), so the shell must own its scroll (h-dvh + overflow-y-auto) — with
     // min-h-dvh the content just expands past the body and gets clipped.
-    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overscroll-contain safe-top safe-x">
+    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overflow-x-hidden overscroll-contain safe-top safe-x">
       <div className="mx-auto w-full max-w-2xl px-4 pt-3 pb-[max(6rem,calc(env(safe-area-inset-bottom)+5rem))] sm:px-6">{children}</div>
     </main>
   );