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

Improve video display and header stacking on all pages

Browse Source 
Adjust z-index values in NetflixGrid and VideoPage components to resolve header overlap issues.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/rfllMl3
This commit is contained in:
sebastjanartic 2025-08-30 21:19:21 +00:00
parent b8f931a0a0
commit 0c04653411
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -245,7 +245,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => scroll('left')} onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')} onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll} onMouseLeave={stopAutoScroll}
className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex" className="absolute left-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
size="sm" size="sm"
> >
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />
@ -258,7 +258,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => scroll('right')} onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')} onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll} onMouseLeave={stopAutoScroll}
className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex" className="absolute right-2 top-1/2 -translate-y-1/2 z-[40] bg-black/50 hover:bg-black/70 text-white border-none w-12 h-12 rounded-full transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
size="sm" size="sm"
> >
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />
@ -274,7 +274,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (
<div <div
key={video.id} key={video.id}
className="flex-shrink-0 w-[calc(70vw-2px)] sm:w-[calc(40vw-2px)] md:w-[calc(30vw-2px)] lg:w-[calc(24vw-2px)] relative group hover:z-50" className="flex-shrink-0 w-[calc(70vw-2px)] sm:w-[calc(40vw-2px)] md:w-[calc(30vw-2px)] lg:w-[calc(24vw-2px)] relative group hover:z-30"
onMouseEnter={() => setClickedVideoId(video.id)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}

2
client/src/index.css
View File

@ -339,7 +339,7 @@ input[data-testid*="search"]::placeholder {
.header-sticky { .header-sticky {
position: sticky !important; position: sticky !important;
top: 0 !important; top: 0 !important;
z-index: 50 !important; z-index: 100 !important;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
background: rgba(30, 20, 40, 0.85) !important; background: rgba(30, 20, 40, 0.85) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);

2
client/src/pages/VideoPage.tsx
View File

@ -323,7 +323,7 @@ export default function VideoPage() {
}} }}
/> />
<div className="flex flex-col lg:flex-row gap-6 relative z-[60]"> <div className="flex flex-col lg:flex-row gap-6 relative z-[40]">
{/* Main video section */} {/* Main video section */}
<div className="flex-1"> <div className="flex-1">
{/* Video player */} {/* Video player */}