From 7ef65fb5a85dc683c956610ac54cc3ade31e93b2 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 20:14:11 +0000
Subject: [PATCH] Improve video card scrolling by fading the track behind
 arrows

Add gradient fade effects to the left and right edges of the video category rows to create a visual separation between the scrolling content and the navigation arrows.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
---
 client/src/components/netflix-grid.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 29e04de..9293b58 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -243,6 +243,12 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         {category.title}
       </h2>
       <div className="relative overflow-hidden">
+        {/* Left gradient fade */}
+        <div className="absolute left-0 top-0 w-12 h-full bg-gradient-to-r from-bunny-dark to-transparent z-[30] pointer-events-none"></div>
+        
+        {/* Right gradient fade */}
+        <div className="absolute right-0 top-0 w-12 h-full bg-gradient-to-l from-bunny-dark to-transparent z-[30] pointer-events-none"></div>
+
         {/* Left scroll button - positioned at container edge */}
         {!hideScrollButtons && (
           <Button