From 534527d233f62144c9adea740fbc96ddcfc7dd92 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:23:14 +0000
Subject: [PATCH] Improve the video carousel scrolling and navigation
 experience

Adjusts the scrolling behavior and replaces hover-activated scroll areas with dedicated buttons in the video carousel component to enhance usability on both desktop and mobile.

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/fgCGOr7
---
 client/src/components/netflix-grid.tsx | 66 ++++++++++++--------------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 9adbb9e..398ff60 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -139,24 +139,16 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     if (scrollRef.current) {
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = isMobile ? containerWidth * 1.2 : containerWidth * 1.0;
+      const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.6;
       const currentScroll = scrollRef.current.scrollLeft;
       const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
       
       let targetScroll;
       
       if (direction === 'left') {
-        targetScroll = currentScroll - scrollAmount;
-        if (targetScroll <= 0) {
-          // Jump to end for infinite loop
-          targetScroll = maxScroll;
-        }
+        targetScroll = Math.max(0, currentScroll - scrollAmount);
       } else {
-        targetScroll = currentScroll + scrollAmount;
-        if (targetScroll >= maxScroll) {
-          // Jump to beginning for infinite loop
-          targetScroll = 0;
-        }
+        targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
       }
         
       scrollRef.current.scrollTo({
@@ -209,41 +201,43 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       </h2>
       
       <div className="relative">
-        {/* Left scroll area with transparent background - only on desktop */}
-        <div
+        {/* Left scroll button - always visible on desktop */}
+        <button
+          onClick={() => scroll('left')}
           onMouseEnter={() => startAutoScroll('left')}
           onMouseLeave={stopAutoScroll}
-          onClick={() => scroll('left')}
-          className="hidden md:block absolute left-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer"
+          className="hidden md:flex absolute left-2 top-1/2 -translate-y-1/2 w-12 h-12 z-30 bg-black/70 hover:bg-black/90 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/20"
+          data-testid="button-scroll-left"
         >
-          <div className="flex items-center justify-center h-full">
-            <ChevronLeft className="w-8 h-8 text-white drop-shadow-lg" />
-          </div>
-        </div>
+          <ChevronLeft className="w-6 h-6 text-white" />
+        </button>
 
-        {/* Right scroll area with transparent background - only on desktop */}
-        <div
+        {/* Right scroll button - always visible on desktop */}
+        <button
+          onClick={() => scroll('right')}
           onMouseEnter={() => startAutoScroll('right')}
           onMouseLeave={stopAutoScroll}
-          onClick={() => scroll('right')}
-          className="hidden md:block absolute right-0 top-0 w-16 h-full z-30 bg-black/20 opacity-0 group-hover:opacity-100 transition-all duration-300 cursor-pointer"
+          className="hidden md:flex absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 z-30 bg-black/70 hover:bg-black/90 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/20"
+          data-testid="button-scroll-right"
         >
-          <div className="flex items-center justify-center h-full">
-            <ChevronRight className="w-8 h-8 text-white drop-shadow-lg" />
-          </div>
-        </div>
+          <ChevronRight className="w-6 h-6 text-white" />
+        </button>
 
-        {/* Mobile touch areas for left/right navigation */}
-        <div 
-          className="md:hidden absolute left-0 top-0 w-1/3 h-full z-40 bg-transparent" 
+        {/* Mobile scroll buttons */}
+        <button
           onClick={() => scroll('left')}
-          style={{ touchAction: 'manipulation' }}
-        />
-        <div 
-          className="md:hidden absolute right-0 top-0 w-1/3 h-full z-40 bg-transparent" 
+          className="md:hidden absolute left-1 top-1/2 -translate-y-1/2 w-10 h-10 z-40 bg-black/70 rounded-full flex items-center justify-center"
+          data-testid="button-mobile-scroll-left"
+        >
+          <ChevronLeft className="w-5 h-5 text-white" />
+        </button>
+        <button
           onClick={() => scroll('right')}
-          style={{ touchAction: 'manipulation' }}
-        />
+          className="md:hidden absolute right-1 top-1/2 -translate-y-1/2 w-10 h-10 z-40 bg-black/70 rounded-full flex items-center justify-center"
+          data-testid="button-mobile-scroll-right"
+        >
+          <ChevronRight className="w-5 h-5 text-white" />
+        </button>
 
         {/* Scrollable video row - edge to edge */}
         <div