From 9a35a7bd2108653f7fe423558bc5909326fdd4c1 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 10:30:35 +0000
Subject: [PATCH] Improve scrolling behavior on mobile devices for a smoother
 user experience

Adjust the scroll amount for mobile devices and enhance touch event handling in the `CategoryRow` component to fix scrolling issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
---
 client/src/components/netflix-grid.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index a58103d..baeac8e 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -140,8 +140,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       // Responsive scroll amount - extra small cards for Netflix style
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      // Scroll by container width for smoother experience
-      const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.75;
+      // More responsive scroll amounts for better mobile experience
+      const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.75;
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
         ? Math.max(0, currentScroll - scrollAmount)
@@ -203,8 +203,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         </div>
 
         {/* Mobile touch areas for left/right navigation */}
-        <div className="md:hidden absolute left-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('left')} />
-        <div className="md:hidden absolute right-0 top-0 w-1/3 h-full z-20" onClick={() => scroll('right')} />
+        <div 
+          className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent" 
+          onClick={() => scroll('left')}
+          style={{ touchAction: 'manipulation' }}
+        />
+        <div 
+          className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent" 
+          onClick={() => scroll('right')}
+          style={{ touchAction: 'manipulation' }}
+        />
 
         {/* Scrollable video row - edge to edge */}
         <div