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

Adjust video card display and scrolling for better viewing

Browse Source 
Update the width of video cards from 200px to 220px and adjust the horizontal scroll calculation in CategoryRow component to accommodate the new card width, ensuring consistent display and navigation of video content.

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 16:18:08 +00:00
parent 0b6ca2c22f
commit d1586daf44
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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') => {
if (scrollRef.current) {
// Scroll exactly 4 cards (200px + 16px gap = 216px per card)
const cardWidth = 200 + 16; // card width + gap
// Scroll exactly 4 cards (220px + 16px gap = 236px per card)
const cardWidth = 220 + 16; // card width + gap
const scrollAmount = cardWidth * 4; // 4 cards at once
const currentScroll = scrollRef.current.scrollLeft;
@ -258,7 +258,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.videos.map((video, index) => (
<div
key={video.id}
className="flex-shrink-0 w-[200px] md:w-[200px] lg:w-[200px] xl:w-[200px] relative group hover:z-50"
className="flex-shrink-0 w-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-50"
onMouseEnter={() => setClickedVideoId(video.id)}
>
{/* Top 10 Number overlay for first category */}