From d2c46814faf07f0de1cc344976eae8663eb9f655 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 08:44:03 +0000
Subject: [PATCH] Improve mobile video browsing by ensuring cards snap
 perfectly into view

Adjusts horizontal scrolling on mobile devices to enforce precise snapping of video cards to the screen edge, enhancing user experience and aligning with user expectations for card transitions.

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 | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 021a8b7..29d6e77 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -270,10 +270,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       const isMobile = window.innerWidth < 768;
       
       if (isMobile) {
-        // On mobile, one full card at a time
+        // On mobile, one full card at a time - snap to exact position
         const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
         const newIndex = Math.round(scrollLeft / cardWidth);
-        setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
+        setCurrentIndex(Math.min(Math.max(newIndex, 0), 9)); // Ensure 0-9 range
       }
     }
   };
@@ -364,8 +364,12 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         {/* Scrollable video row - in container */}
         <div
           ref={scrollRef}
-          className="flex gap-3 md:gap-3 gap-0 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2"
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', scrollSnapType: 'x mandatory' }}
+          className="flex gap-0 md:gap-3 overflow-x-auto scrollbar-hide py-4 px-3 md:px-2"
+          style={{ 
+            scrollbarWidth: 'none', 
+            msOverflowStyle: 'none', 
+            scrollSnapType: window.innerWidth < 768 ? 'x mandatory' : 'none'
+          }}
           onScroll={handleScroll}
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
@@ -375,6 +379,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
             <div 
               key={video.id} 
               className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
+              style={{ 
+                scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
+              }}
               onMouseEnter={() => setClickedVideoId(video.id)}
             >
               {/* Top 10 Number overlay for first category */}
@@ -394,7 +401,6 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
                   onVideoClick(video);
                 }}
                 className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
-                style={{ scrollSnapAlign: 'start' }}
               />
             </div>
           ))}