From cedb7b45d8e6594fb1a40b764bd5229edeb56814 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Sat, 6 Sep 2025 19:36:14 +0000 Subject: [PATCH] Adjust video card width for better display on smaller screens Update `netflix-grid.tsx` to set the `cardWidth` to 280px for non-mobile views and adjust the `className` for video elements to use `w-[280px]` for non-mobile breakpoints, ensuring consistent rendering. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 70557b10-8a46-4f62-9cec-2397b6c48e73 Replit-Commit-Checkpoint-Type: full_checkpoint --- client/src/components/netflix-grid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 1295e59..b9b0ac0 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -230,7 +230,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate // Calculate card width with gap for precise scrolling const containerWidth = scrollRef.current.clientWidth; const isMobile = window.innerWidth < 768; - const cardWidth = isMobile ? containerWidth - 24 : 330; // 24px for mobile margins (3rem - 1.5rem each side) + const cardWidth = isMobile ? containerWidth - 24 : 280; // 24px for mobile margins const gap = 12; // 3 * 0.25rem = 12px gap const scrollAmount = cardWidth + gap; @@ -424,7 +424,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate {category.videos.map((video, index) => (