From a1c2cc0889638ca6cd18aeb48f6f28650072b022 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 4 Jun 2026 20:30:47 +0330
Subject: [PATCH] Fix: screens can't scroll (min-h-dvh under overflow-hidden
 body)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

body is overflow:hidden (to lock the game table), so a min-h-dvh shell just
expands past the viewport and is clipped — its overflow-y-auto never engages.
Make ScreenShell + HomeScreen fixed-height h-dvh scroll containers (with
overscroll-contain + bottom padding). Fixes Profile/Friends/Shop/Leaderboard/
Lobby/BuyCoins/Notifications and the home menu on short viewports.

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

diff --git a/src/components/HomeScreen.tsx b/src/components/HomeScreen.tsx
index dfc5921..8c60b0c 100644
--- a/src/components/HomeScreen.tsx
+++ b/src/components/HomeScreen.tsx
@@ -46,7 +46,7 @@ export function HomeScreen() {
   const playOnline = () => nav(isAuthed ? "online" : "auth");
 
   return (
-    <main className="persian-pattern relative min-h-dvh w-full overflow-y-auto">
+    <main className="persian-pattern relative h-dvh w-full overflow-y-auto overscroll-contain">
       <FloatingSuits />
       <div className="relative z-10 mx-auto w-full max-w-md p-4 sm:p-6 flex flex-col min-h-dvh">
         <div className="pt-1">
diff --git a/src/components/online/ScreenHeader.tsx b/src/components/online/ScreenHeader.tsx
index 5c8c48f..08750a9 100644
--- a/src/components/online/ScreenHeader.tsx
+++ b/src/components/online/ScreenHeader.tsx
@@ -32,8 +32,11 @@ export function ScreenHeader({
 
 export function ScreenShell({ children }: { children: React.ReactNode }) {
   return (
-    <main className="persian-pattern relative min-h-dvh w-full overflow-y-auto">
-      <div className="mx-auto w-full max-w-2xl p-4 sm:p-6">{children}</div>
+    // 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">
+      <div className="mx-auto w-full max-w-2xl p-4 pb-24 sm:p-6 sm:pb-28">{children}</div>
     </main>
   );
 }