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

Improve responsiveness of video grids across all screen sizes

Browse Source 
Adjusted grid item sizing and navigation arrow visibility to enhance responsive behavior in `netflix-grid.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/8e9f2b36-ec9c-4acc-b19b-5304fa9790c5/3f1nxbo
This commit is contained in:
sebastjanartic 2025-09-01 17:24:58 +00:00
parent d31ba40c22
commit ce0380c353
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -258,7 +258,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-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-50" className="flex-shrink-0 w-[220px] relative group hover:z-50"
onMouseEnter={() => setClickedVideoId(video.id)} onMouseEnter={() => setClickedVideoId(video.id)}
> >
{/* Top 10 Number overlay for first category */} {/* Top 10 Number overlay for first category */}
@ -277,23 +277,23 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
setClickedVideoId(video.id); setClickedVideoId(video.id);
onVideoClick(video); onVideoClick(video);
}} }}
className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden" className="w-full hover:scale-102 hover:z-50 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
/> />
</div> </div>
))} ))}
</div> </div>
{/* Navigation arrows - black circles */} {/* Navigation arrows - black circles */}
<div className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] hidden md:block"> <div className="absolute left-2 top-1/2 -translate-y-1/2 z-[60]">
<Button <Button
onClick={() => scroll('left')} onClick={() => scroll('left')}
className="gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 px-3 bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm ml-[160px] mr-[160px]" className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
size="sm" size="sm"
> >
<ChevronLeft className="w-4 h-4" /> <ChevronLeft className="w-4 h-4" />
</Button> </Button>
</div> </div>
<div className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] hidden md:block"> <div className="absolute right-2 top-1/2 -translate-y-1/2 z-[60]">
<Button <Button
onClick={() => scroll('right')} onClick={() => scroll('right')}
className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm" className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"