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

Adjust scroll button positioning to better align with video thumbnails

Browse Source 
Update the vertical positioning of left and right scroll buttons in the `netflix-grid.tsx` component to `top-[45%]` to improve visual alignment with video thumbnails.

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/QCN70f2
This commit is contained in:
sebastjanartic 2025-08-29 14:28:09 +00:00
parent 368e023ed3
commit 74daa5f04c
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756477639503.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

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

@ -201,23 +201,23 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
</h2>
<div className="relative">
{/* Left scroll button - positioned at video center */}
{/* Left scroll button - positioned at video thumbnail center */}
<button
onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
className="hidden md:flex absolute left-2 top-[60%] -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"
className="hidden md: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"
data-testid="button-scroll-left"
>
<ChevronLeft className="w-6 h-6 text-white" />
</button>
{/* Right scroll button - positioned at video center */}
{/* Right scroll button - positioned at video thumbnail center */}
<button
onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
className="hidden md:flex absolute right-2 top-[60%] -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"
className="hidden md: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"
data-testid="button-scroll-right"
>
<ChevronRight className="w-6 h-6 text-white" />
@ -226,14 +226,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Mobile scroll buttons */}
<button
onClick={() => scroll('left')}
className="md:hidden absolute left-1 top-[60%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
className="md:hidden absolute left-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-left"
>
<ChevronLeft className="w-5 h-5 text-white" />
</button>
<button
onClick={() => scroll('right')}
className="md:hidden absolute right-1 top-[60%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
className="md:hidden absolute right-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
data-testid="button-mobile-scroll-right"
>
<ChevronRight className="w-5 h-5 text-white" />