From 7894ecb255454ef7f1b70f894cab1d5de260836f Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 08:42:05 +0000
Subject: [PATCH] Ensure only one video card displays at a time on mobile
 screens

Refactors the `CategoryRow` component to implement snap-to-start scroll behavior on mobile devices, ensuring that only one full video card is visible at a time. This change adjusts scroll calculations and introduces `scrollSnapType: 'x mandatory'` to the container.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index b8361ae..021a8b7 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -270,10 +270,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       const isMobile = window.innerWidth < 768;
       
       if (isMobile) {
-        // On mobile, cards snap to left edge
+        // On mobile, one full card at a time
         const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
-        const gap = 12;
-        const newIndex = Math.round(scrollLeft / (cardWidth + gap));
+        const newIndex = Math.round(scrollLeft / cardWidth);
         setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
       }
     }
@@ -302,10 +301,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
         const cardWidth = containerWidth - 24; // Account for container margins
-        const gap = 12;
-        // Scroll so next card aligns to left edge (accounting for container padding)
+        // Scroll so only one full card is visible
         scrollRef.current.scrollTo({
-          left: nextIndex * (cardWidth + gap) + 12, // +12 for left container padding
+          left: nextIndex * cardWidth,
           behavior: 'smooth'
         });
         setCurrentIndex(nextIndex);
@@ -318,10 +316,9 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
         const cardWidth = containerWidth - 24; // Account for container margins
-        const gap = 12;
-        // Scroll so previous card aligns to left edge (accounting for container padding)
+        // Scroll so only one full card is visible
         scrollRef.current.scrollTo({
-          left: prevIndex * (cardWidth + gap) + 12, // +12 for left container padding
+          left: prevIndex * cardWidth,
           behavior: 'smooth'
         });
         setCurrentIndex(prevIndex);
@@ -367,8 +364,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         {/* Scrollable video row - in container */}
         <div
           ref={scrollRef}
-          className="flex gap-3 overflow-x-auto scrollbar-hide py-4 px-2"
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+          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' }}
           onScroll={handleScroll}
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
@@ -377,7 +374,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
           {category.videos.map((video, index) => (
             <div 
               key={video.id} 
-              className="flex-shrink-0 w-[calc(100vw-3rem)] sm:w-[330px] relative hover:z-50"
+              className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
               onMouseEnter={() => setClickedVideoId(video.id)}
             >
               {/* Top 10 Number overlay for first category */}
@@ -397,6 +394,7 @@ 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>
           ))}
@@ -411,9 +409,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
                 if (scrollRef.current) {
                   const containerWidth = scrollRef.current.clientWidth;
                   const cardWidth = containerWidth - 24; // Account for margins
-                  const gap = 12;
                   scrollRef.current.scrollTo({
-                    left: index * (cardWidth + gap),
+                    left: index * cardWidth,
                     behavior: 'smooth'
                   });
                   setCurrentIndex(index);