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

Adjust card width calculation in `netflix-grid.tsx` to use `window.innerWidth` for more accurate horizontal scrolling and snapping behavior on mobile, addressing issues where videos might stop prematurely.

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

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 824ef12..31f94af 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -287,7 +287,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       if (isMobile) {
         // Debounce the dot update to prevent flickering during scroll
         const timer = setTimeout(() => {
-          const cardWidth = containerWidth - 24; // Account for container margins (12px each side)
+          // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+          const cardWidth = window.innerWidth - 24;
           const scrollProgress = scrollLeft / cardWidth;
           const newIndex = Math.round(scrollProgress);
           const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
@@ -324,8 +325,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       // 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 container margins
+        // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+        const cardWidth = window.innerWidth - 24;
         // Scroll so only one full card is visible
         scrollRef.current.scrollTo({
           left: nextIndex * cardWidth,
@@ -339,8 +340,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       // 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 container margins
+        // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+        const cardWidth = window.innerWidth - 24;
         // Scroll so only one full card is visible
         scrollRef.current.scrollTo({
           left: prevIndex * cardWidth,
@@ -438,8 +439,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
               key={`dot-${category.title}-${index}`}
               onClick={() => {
                 if (scrollRef.current) {
-                  const containerWidth = scrollRef.current.clientWidth;
-                  const cardWidth = containerWidth - 24; // Account for margins
+                  // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
+                  const cardWidth = window.innerWidth - 24;
                   scrollRef.current.scrollTo({
                     left: index * cardWidth,
                     behavior: 'smooth'