From 5877e65e60546f004c6d9ac00d152bf05247f61f Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 16:44:33 +0000
Subject: [PATCH] Improve carousel scrolling behavior and remove auto-scroll
 functionality

Disable auto-scroll functionality in the carousel component and adjust styling for smoother horizontal scrolling.

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/KcsXLXG
---
 client/src/components/netflix-grid.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index e76d497..e459b59 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -230,16 +230,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             e.preventDefault();
             e.stopPropagation();
             console.log('LEFT BUTTON CLICKED!');
-            alert('LEFT BUTTON CLICKED!');
             scroll('left');
           }}
           onMouseEnter={(e) => {
             e.stopPropagation();
-            startAutoScroll('left');
+            // startAutoScroll('left');
           }}
           onMouseLeave={(e) => {
             e.stopPropagation();
-            stopAutoScroll();
+            // stopAutoScroll();
           }}
           className="flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
           data-testid="button-scroll-left"
@@ -253,16 +252,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             e.preventDefault();
             e.stopPropagation();
             console.log('RIGHT BUTTON CLICKED!');
-            alert('RIGHT BUTTON CLICKED!');
             scroll('right');
           }}
           onMouseEnter={(e) => {
             e.stopPropagation();
-            startAutoScroll('right');
+            // startAutoScroll('right');
           }}
           onMouseLeave={(e) => {
             e.stopPropagation();
-            stopAutoScroll();
+            // stopAutoScroll();
           }}
           className="flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
           data-testid="button-scroll-right"
@@ -311,19 +309,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         </button>
 
         {/* Continuous flowing carousel - videos flow across entire width */}
-        <div className="overflow-hidden">
+        <div className="overflow-hidden w-full">
           <div 
-            className="flex space-x-2 md:space-x-3 pb-4 px-4 md:px-0"
+            className="flex space-x-2 md:space-x-3 pb-4"
             style={{
               transform: `translateX(${translateX}px)`,
               willChange: 'transform',
-              transition: isScrolling ? 'none' : 'transform 0.3s ease'
-            }}
-            ref={(el) => {
-              if (el) {
-                console.log(`Setting transform: translateX(${translateX}px)`);
-                el.style.transform = `translateX(${translateX}px)`;
-              }
+              transition: 'transform 0.3s ease',
+              width: 'max-content'
             }}
           >
             {/* Many copies for true infinite scroll */}