fix: prevent vertical overflow on card scroll containers

- Add overflow-y-hidden to all three card containers (skeleton, GameSection, SaleSection)
- Keeps horizontal scrolling but prevents any vertical scroll
This commit is contained in:
2026-06-26 21:59:59 +08:00
parent b91068ac64
commit 945d0dc96d
+3 -3
View File
@@ -55,7 +55,7 @@ function SkeletonSections() {
className='space-y-3' className='space-y-3'
> >
<div className='h-5 w-48 bg-text/5 rounded animate-pulse' /> <div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
<div className='flex gap-3 overflow-x-auto pb-2'> <div className='flex gap-3 overflow-x-auto overflow-y-hidden pb-2'>
{[1, 2, 3, 4].map((j) => ( {[1, 2, 3, 4].map((j) => (
<div <div
key={j} key={j}
@@ -121,7 +121,7 @@ function GameSection({
</div> </div>
</div> </div>
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-none overscroll-y-none'> <div className='flex gap-3 overflow-x-auto overflow-y-hidden pb-2 -mx-1 px-1 scrollbar-none overscroll-y-none'>
{games.map((game, idx) => ( {games.map((game, idx) => (
<motion.div <motion.div
key={game.id} key={game.id}
@@ -228,7 +228,7 @@ function SaleSection({
</div> </div>
</div> </div>
<div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-none overscroll-y-none'> <div className='flex gap-3 overflow-x-auto overflow-y-hidden pb-2 -mx-1 px-1 scrollbar-none overscroll-y-none'>
{games.map((game, idx) => { {games.map((game, idx) => {
const discountPct = game.price_initial && game.price_current const discountPct = game.price_initial && game.price_current
? Math.round((1 - game.price_current / game.price_initial) * 100) ? Math.round((1 - game.price_current / game.price_initial) * 100)