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

Improve spacing and scrolling in video category rows

Browse Source 
Adjust horizontal spacing for video cards and update scrolling logic in the CategoryRow component to use a new gap value (16px instead of 12px), affecting the scroll amount calculation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 8e9f2b36-ec9c-4acc-b19b-5304fa9790c5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/8e9f2b36-ec9c-4acc-b19b-5304fa9790c5/fyyFszO
This commit is contained in:
sebastjanartic 2025-09-01 15:31:03 +00:00
parent 6abaaca81d
commit 7f19a13d73
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756740630966.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB

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

@ -188,8 +188,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
const scroll = (direction: 'left' | 'right') => { const scroll = (direction: 'left' | 'right') => {
if (scrollRef.current) { if (scrollRef.current) {
// Scroll exactly 4 cards (240px + 12px gap = 252px per card) // Scroll exactly 4 cards (240px + 16px gap = 256px per card)
const cardWidth = 240 + 12; // card width + gap const cardWidth = 240 + 16; // card width + gap
const scrollAmount = cardWidth * 4; // 4 cards at once const scrollAmount = cardWidth * 4; // 4 cards at once
const currentScroll = scrollRef.current.scrollLeft; const currentScroll = scrollRef.current.scrollLeft;
@ -247,7 +247,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{/* Scrollable video row - true 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 pl-4 pr-4" className="flex gap-4 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
style={{ style={{
maxWidth: '1000px', maxWidth: '1000px',
margin: '0 auto', margin: '0 auto',