fix(mobile): reward + shop-detail modals scroll on short phones
CI/CD / CI - API (dotnet build + engine sim) (push) Successful in 3m0s
CI/CD / CI - Web (tsc + next build) (push) Successful in 1m9s
CI/CD / Deploy - local stack (db + server + web) (push) Failing after 2m21s

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>
This commit is contained in:
soroush.asadi
2026-06-07 04:32:14 +03:30
parent dcea0bc87c
commit 1fba9c2f96
2 changed files with 2 additions and 2 deletions
@@ -83,7 +83,7 @@ export function PostMatchRewardsModal({
initial={{ scale: 0.82, y: 28 }} initial={{ scale: 0.82, y: 28 }}
animate={{ scale: 1, y: 0 }} animate={{ scale: 1, y: 0 }}
transition={{ type: "spring", stiffness: 200, damping: 18 }} 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 */} {/* radiating bg glow */}
<div <div
+1 -1
View File
@@ -319,7 +319,7 @@ function DetailSheet({
exit={{ y: 40, opacity: 0 }} exit={{ y: 40, opacity: 0 }}
transition={{ type: "spring", stiffness: 240, damping: 24 }} transition={{ type: "spring", stiffness: 240, damping: 24 }}
onClick={(e) => e.stopPropagation()} 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"> <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" /> <X className="size-4 text-cream/60" />