fix(mobile): reward + shop-detail modals scroll on short phones
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:
@@ -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
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user