From 1fba9c2f96d61e71095f4dc748df34d7e8298646 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Sun, 7 Jun 2026 04:32:14 +0330
Subject: [PATCH] fix(mobile): reward + shop-detail modals scroll on short
 phones
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deep-dive responsive audit. The post-match rewards modal used overflow-hidden
and the shop detail sheet had no height cap — both could clip content (long
reward lists / sticker packs) on short or landscape phones. Added
max-h-[90vh]/[88vh] + overflow-y-auto. Audit confirmed Leaderboard, Lobby,
PublicProfile rows/modals already handle min-w-0/truncate/scroll correctly.

Verified: tsc + next build clean; web rebuilt on :1500.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/online/PostMatchRewardsModal.tsx | 2 +-
 src/components/screens/ShopScreen.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/online/PostMatchRewardsModal.tsx b/src/components/online/PostMatchRewardsModal.tsx
index 5a6f74c..0d12bf7 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 overflow-hidden"
+        className="glass rounded-3xl p-7 w-full max-w-sm text-center relative max-h-[90vh] overflow-y-auto overflow-x-hidden"
       >
         {/* radiating bg glow */}
         <div
diff --git a/src/components/screens/ShopScreen.tsx b/src/components/screens/ShopScreen.tsx
index 2eb13d7..6b8eab5 100644
--- a/src/components/screens/ShopScreen.tsx
+++ b/src/components/screens/ShopScreen.tsx
@@ -319,7 +319,7 @@ function DetailSheet({
         exit={{ y: 40, opacity: 0 }}
         transition={{ type: "spring", stiffness: 240, damping: 24 }}
         onClick={(e) => e.stopPropagation()}
-        className="glass rounded-3xl p-6 w-full max-w-sm text-center relative"
+        className="glass rounded-3xl p-6 w-full max-w-sm text-center relative max-h-[88vh] overflow-y-auto"
       >
         <button onClick={onClose} className="absolute top-3 ltr:right-3 rtl:left-3 grid size-9 place-items-center rounded-full hover:bg-navy-800/80 transition">
           <X className="size-4 text-cream/60" />