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

Adjust video grid spacing and card width for better display

Browse Source 
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
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -410,7 +410,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - in container */} {/* Scrollable video row - in container */}
<div <div
ref={scrollRef} 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={{ style={{
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none', msOverflowStyle: 'none',
@ -424,7 +424,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(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={{ style={{
scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none' scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
}} }}