sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video card scrolling by fading the track behind arrows

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-01 20:14:11 +00:00
parent 1e83a546b2
commit 7ef65fb5a8
1 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/netflix-grid.tsx
View File

@ -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