From 91617c8835137ab64b6e9b015f45f738608a7319 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 17:07:20 +0000
Subject: [PATCH] Improve video carousel scrolling experience for smoother
 navigation

Refactors the Netflix grid component's horizontal scrolling implementation. Instead of using CSS transforms for manual positioning, it now utilizes the browser's native smooth scrolling behavior via `scrollBy` on a container with `overflow-x-auto`. This change aims to resolve issues where videos were not scrolling correctly and to provide a more fluid user experience. The `scrollContainerRef` is introduced to directly access the DOM element for scrolling. The component now relies on CSS to manage the display of the carousel items, eliminating the need for manual `translateX` state management and fixed video widths for calculation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/yexZbDm
---
 client/src/components/netflix-grid.tsx | 31 +++++++++++++-------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 1417481..3cbae89 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -134,19 +134,20 @@ interface CategoryRowProps {
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(true);
-  
-  const [translateX, setTranslateX] = useState(0);
   const [isScrolling, setIsScrolling] = useState(false);
   const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal');
-  const videosToShow = 5; // Show 5 videos at a time
-  const videoWidth = 120; // Width including spacing
 
   const scroll = (direction: 'left' | 'right') => {
-    // SUPER SIMPLE - just move without any wrapping
-    const step = direction === 'right' ? -250 : 250;
-    setTranslateX(prev => prev + step);
+    if (!scrollContainerRef.current) return;
+    
+    const scrollAmount = direction === 'right' ? 300 : -300;
+    scrollContainerRef.current.scrollBy({
+      left: scrollAmount,
+      behavior: 'smooth'
+    });
   };
 
   const toggleSpeed = (direction: 'left' | 'right') => {
@@ -327,15 +328,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5 text-white" />
         </button>
 
-        {/* Continuous flowing carousel - videos flow across entire width */}
-        <div className="overflow-hidden">
-          <div 
-            className="flex space-x-4 pb-4"
-            style={{
-              transform: `translateX(${translateX}px)`,
-              willChange: 'transform'
-            }}
-          >
+        {/* Simple horizontal scroll carousel */}
+        <div 
+          ref={scrollContainerRef}
+          className="overflow-x-auto scrollbar-hide"
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
+          <div className="flex space-x-4 pb-4 w-max">
             {/* ULTRA SIMPLE - just many copies */}
             {Array.from({ length: 50 }).map((_, copyIndex) => 
               category.videos.map((video, videoIndex) => (