From 4fcf1e104f1772a6260b4a732b4b888040097805 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 08:40:33 +0000
Subject: [PATCH] Improve carousel behavior on mobile devices by snapping cards
 to the left

Adjust carousel scrolling logic in `netflix-grid.tsx` to ensure cards snap to the left edge on mobile devices, accounting for container padding and margins, for a better user experience.

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 | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 62b49f4..b8361ae 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -270,8 +270,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       const isMobile = window.innerWidth < 768;
       
       if (isMobile) {
-        // On mobile, cards are full width
-        const cardWidth = containerWidth - 24; // Account for margins
+        // On mobile, cards snap to left edge
+        const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
         const gap = 12;
         const newIndex = Math.round(scrollLeft / (cardWidth + gap));
         setCurrentIndex(Math.min(newIndex, 9)); // Max 9 for 10 cards (0-indexed)
@@ -297,14 +297,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
     const isRightSwipe = distance < -50; // Swipe right (previous)
     
     if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards
-      // Navigate to next card
+      // Navigate to next card - snap to left edge of screen
       const nextIndex = currentIndex + 1;
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
-        const cardWidth = containerWidth - 24; // Account for margins
+        const cardWidth = containerWidth - 24; // Account for container margins
         const gap = 12;
+        // Scroll so next card aligns to left edge (accounting for container padding)
         scrollRef.current.scrollTo({
-          left: nextIndex * (cardWidth + gap),
+          left: nextIndex * (cardWidth + gap) + 12, // +12 for left container padding
           behavior: 'smooth'
         });
         setCurrentIndex(nextIndex);
@@ -312,14 +313,15 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
     }
     
     if (isRightSwipe && currentIndex > 0) {
-      // Navigate to previous card
+      // Navigate to previous card - snap to left edge of screen
       const prevIndex = currentIndex - 1;
       if (scrollRef.current) {
         const containerWidth = scrollRef.current.clientWidth;
-        const cardWidth = containerWidth - 24; // Account for margins
+        const cardWidth = containerWidth - 24; // Account for container margins
         const gap = 12;
+        // Scroll so previous card aligns to left edge (accounting for container padding)
         scrollRef.current.scrollTo({
-          left: prevIndex * (cardWidth + gap),
+          left: prevIndex * (cardWidth + gap) + 12, // +12 for left container padding
           behavior: 'smooth'
         });
         setCurrentIndex(prevIndex);