Adjust video grid spacing and card width for better display

Update netflix-grid.tsx to modify the flex gap for category rows and adjust the width of video cards for improved responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50f1ae50-8e22-495d-bb42-127d908a9bc5
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
sebastjanartic 2025-09-04 20:40:47 +00:00
parent d777a26766
commit 46e018c790

View File

@ -410,7 +410,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - in container */}
<div
ref={scrollRef}
className="flex gap-2 md:gap-3 overflow-x-auto scrollbar-hide py-2 md:py-4 px-4 md:px-2"
className="flex gap-1 md:gap-3 overflow-x-auto scrollbar-hide py-2 md:py-4 px-2 md:px-2"
style={{
scrollbarWidth: 'none',
msOverflowStyle: 'none',
@ -424,7 +424,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[calc(100vw-4rem)] sm:w-[330px] relative hover:z-50"
className="flex-shrink-0 w-[calc(100vw-2rem)] sm:w-[330px] relative hover:z-50"
style={{
scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
}}