Adjust video grid spacing and width for better viewing

Update client/src/components/netflix-grid.tsx to adjust horizontal padding and individual video item width for improved display on various screen sizes.

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:46:49 +00:00
parent 46e018c790
commit e1314807be

View File

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