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

Improve video grid layout by adjusting spacing and positioning

Browse Source 
Adjusted left and right padding for category titles and scrollable video rows to achieve full edge-to-edge display in the `netflix-grid.tsx` component, enhancing visual presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
This commit is contained in:
sebastjanartic 2025-09-01 20:12:13 +00:00
parent 267b4ceac6
commit 1e83a546b2
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -239,11 +239,11 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
className="relative group" className="relative group"
onMouseLeave={() => setClickedVideoId(null)} onMouseLeave={() => setClickedVideoId(null)}
> >
<h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase"> <h2 className="text-lg font-medium text-bunny-light mb-1 mx-12 leading-tight uppercase">
{category.title} {category.title}
</h2> </h2>
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Left scroll button - only on desktop and not hidden */} {/* Left scroll button - positioned at container edge */}
{!hideScrollButtons && ( {!hideScrollButtons && (
<Button <Button
onClick={() => scroll('left')} onClick={() => scroll('left')}
@ -256,7 +256,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
</Button> </Button>
)} )}
{/* Right scroll button - only on desktop and not hidden */} {/* Right scroll button - positioned at container edge */}
{!hideScrollButtons && ( {!hideScrollButtons && (
<Button <Button
onClick={() => scroll('right')} onClick={() => scroll('right')}
@ -268,11 +268,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
<ChevronRight className="w-6 h-6" /> <ChevronRight className="w-6 h-6" />
</Button> </Button>
)} )}
{/* Scrollable video row - full width from edge to edge */}
{/* Scrollable video row - true edge to edge */}
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-2" className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-12"
style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }} style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
> >
{category.videos.map((video, index) => ( {category.videos.map((video, index) => (