From 95ad3e6e345a2ef61efb03befafe0a5310783b7d Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 08:38:52 +0000
Subject: [PATCH] Improve scrolling behavior for video grids on mobile devices

Adjusts the calculation of scroll amounts and card indices in the `CategoryRow` component for mobile views. It now correctly accounts for margins and gaps between cards, ensuring smoother and more accurate horizontal scrolling. The logic for determining the current card index and navigating between cards has been refined to handle the specific layout of full-width cards on smaller screens, preventing overlapping or skipped items.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
---
 client/src/components/netflix-grid.tsx | 35 ++++++++++++++++++--------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 528bc30..62b49f4 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -206,13 +206,16 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Viewport-based scroll amount for full-width cards
+      // Calculate card width with gap for precise scrolling
       const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area
+      const isMobile = window.innerWidth < 768;
+      const cardWidth = isMobile ? containerWidth - 24 : 330; // 24px for mobile margins (3rem - 1.5rem each side)
+      const gap = 12; // 3 * 0.25rem = 12px gap
+      const scrollAmount = cardWidth + gap;
       
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
-        ? currentScroll - scrollAmount 
+        ? Math.max(0, currentScroll - scrollAmount)
         : currentScroll + scrollAmount;
         
       scrollRef.current.scrollTo({
@@ -264,9 +267,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
     if (scrollRef.current) {
       const containerWidth = scrollRef.current.clientWidth;
       const scrollLeft = scrollRef.current.scrollLeft;
-      const cardWidth = containerWidth; // Full width cards on mobile
-      const newIndex = Math.round(scrollLeft / cardWidth);
-      setCurrentIndex(newIndex);
+      const isMobile = window.innerWidth < 768;
+      
+      if (isMobile) {
+        // On mobile, cards are full width
+        const cardWidth = containerWidth - 24; // Account for margins
+        const gap = 12;
+        const newIndex = Math.round(scrollLeft / (cardWidth + gap));
+        setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
+      }
     }
   };
 
@@ -287,13 +296,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
     const isLeftSwipe = distance > 50; // Swipe left (next)
     const isRightSwipe = distance < -50; // Swipe right (previous)
     
-    if (isLeftSwipe && currentIndex < Math.min(10, category.videos.length) - 1) {
+    if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards
       // Navigate to next card
       const nextIndex = currentIndex + 1;
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
+        const cardWidth = containerWidth - 24; // Account for margins
+        const gap = 12;
         scrollRef.current.scrollTo({
-          left: nextIndex * containerWidth,
+          left: nextIndex * (cardWidth + gap),
           behavior: 'smooth'
         });
         setCurrentIndex(nextIndex);
@@ -305,8 +316,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       const prevIndex = currentIndex - 1;
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
+        const cardWidth = containerWidth - 24; // Account for margins
+        const gap = 12;
         scrollRef.current.scrollTo({
-          left: prevIndex * containerWidth,
+          left: prevIndex * (cardWidth + gap),
           behavior: 'smooth'
         });
         setCurrentIndex(prevIndex);
@@ -395,8 +408,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
               onClick={() => {
                 if (scrollRef.current) {
                   const containerWidth = scrollRef.current.clientWidth;
+                  const cardWidth = containerWidth - 24; // Account for margins
+                  const gap = 12;
                   scrollRef.current.scrollTo({
-                    left: index * containerWidth,
+                    left: index * (cardWidth + gap),
                     behavior: 'smooth'
                   });
                   setCurrentIndex(index);