From 945d0dc96d69d05f090a6c6cb077184648109746 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Fri, 26 Jun 2026 21:59:59 +0800
Subject: [PATCH] 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
---
 app/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index f76e662..b815055 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -55,7 +55,7 @@ function SkeletonSections() {
                     className='space-y-3'
                 >
                     <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) => (
                             <div
                                 key={j}
@@ -121,7 +121,7 @@ function GameSection({
                 </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) => (
                     <motion.div
                         key={game.id}
@@ -228,7 +228,7 @@ function SaleSection({
                 </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) => {
                     const discountPct = game.price_initial && game.price_current
                         ? Math.round((1 - game.price_current / game.price_initial) * 100)