From 9ee927ce77def826a140b4654ef1da733c903f51 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Fri, 26 Jun 2026 22:03:44 +0800
Subject: [PATCH] fix: prevent scroll capture on card rows with pointer-events

- Wrap card containers in overflow-x-auto with pointer-events: none
- Inner flex div gets pointer-events: auto so cards remain interactive
- Main page scrolling works normally when cursor is over card rows
---
 app/page.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 9c548f8..1a37d70 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -55,7 +55,8 @@ function SkeletonSections() {
                     className='space-y-3'
                 >
                     <div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
-                    <div className='flex gap-3 flex-wrap gap-3 pb-2'>
+                    <div className='overflow-x-auto overflow-y-hidden' style={{ pointerEvents: 'none' }}>
+                        <div className='flex gap-3 pb-2' style={{ pointerEvents: 'auto' }}>
                         {[1, 2, 3, 4].map((j) => (
                             <div
                                 key={j}
@@ -69,6 +70,7 @@ function SkeletonSections() {
                             </div>
                         ))}
                     </div>
+                    </div>
                 </div>
             ))}
         </>
@@ -121,7 +123,8 @@ function GameSection({
                 </div>
             </div>
 
-            <div className='flex gap-3 flex-wrap gap-3 pb-2 -mx-1 px-1'>
+            <div className='overflow-x-auto overflow-y-hidden -mx-1 px-1' style={{ pointerEvents: 'none' }}>
+                        <div className='flex gap-3 pb-2 px-1' style={{ pointerEvents: 'auto' }}>
                 {games.map((game, idx) => (
                     <motion.div
                         key={game.id}
@@ -199,6 +202,7 @@ function GameSection({
                     </motion.div>
                 ))}
             </div>
+        </div>
         </motion.section>
     )
 }
@@ -228,7 +232,8 @@ function SaleSection({
                 </div>
             </div>
 
-            <div className='flex gap-3 flex-wrap gap-3 pb-2 -mx-1 px-1'>
+            <div className='overflow-x-auto overflow-y-hidden -mx-1 px-1' style={{ pointerEvents: 'none' }}>
+                        <div className='flex gap-3 pb-2 px-1' style={{ pointerEvents: 'auto' }}>
                 {games.map((game, idx) => {
                     const discountPct = game.price_initial && game.price_current
                         ? Math.round((1 - game.price_current / game.price_initial) * 100)
@@ -324,6 +329,7 @@ function SaleSection({
                     )
                 })}
             </div>
+        </div>
 
             {/* Disclaimer */}
             <p className='text-[10px] text-text/20 mt-1 text-right'>