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

Improve scrolling experience by adjusting video grid spacing

Browse Source 
Adjusted padding and margins in the Netflix grid component to allow for true edge-to-edge display of videos and ensure sufficient space for scroll buttons on various screen sizes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/6upLu3q
This commit is contained in:
sebastjanartic 2025-08-30 12:50:03 +00:00
parent 50fa13147f
commit 8716a2aae0
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -158,33 +158,33 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{category.title}
</h2>
<div className="relative px-16">
<div className="relative">
{/* Left scroll button */}
<Button
onClick={() => scroll('left')}
className="absolute -left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
className="absolute left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-10 h-10 md:w-12 md:h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
size="sm"
>
<ChevronLeft className="w-5 h-5" />
<ChevronLeft className="w-4 h-4 md:w-5 md:h-5" />
</Button>
{/* Right scroll button */}
<Button
onClick={() => scroll('right')}
className="absolute -right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
className="absolute right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-10 h-10 md:w-12 md:h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
size="sm"
>
<ChevronRight className="w-5 h-5" />
<ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
</Button>
{/* Scrollable video row - full width edge to edge */}
{/* Scrollable video row - true edge to edge */}
<div
ref={scrollRef}
className="flex space-x-3 overflow-x-auto scrollbar-hide pb-4 px-4"
className="flex gap-1 overflow-x-auto scrollbar-hide pb-4"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
>
{category.videos.map((video, index) => (
<div key={video.id} className="flex-shrink-0 w-[45vw] sm:w-[35vw] md:w-[22vw] lg:w-[18vw] relative group">
<div key={video.id} className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] relative group">
{/* Top 10 Number overlay for first category */}
{category.title.includes("Top 10") && index < 10 && (
<div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"