From 41aeda1539f9052a40bb8d8cb630fbb4e34d6faa Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 15:42:51 +0000
Subject: [PATCH] Adjust video card widths and container sizes for better
 display

Update card width from 240px to 220px and max container width from 980px to 920px in netflix-grid.tsx and home.tsx to address overly wide and long cards.

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
---
 client/src/components/netflix-grid.tsx | 8 ++++----
 client/src/pages/home.tsx              | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index fbfe47c..e98261e 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -188,8 +188,8 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Scroll exactly 4 cards (240px + 16px gap = 256px per card)
-      const cardWidth = 240 + 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;
@@ -249,7 +249,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
           ref={scrollRef}
           className="flex gap-4 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
           style={{ 
-            maxWidth: '980px', 
+            maxWidth: '920px', 
             margin: '0 auto', 
             scrollbarWidth: 'none', 
             msOverflowStyle: 'none'
@@ -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-[240px] md:w-[240px] lg:w-[240px] xl:w-[240px] relative group hover:z-30"
+              className="flex-shrink-0 w-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-30"
               onMouseEnter={() => setClickedVideoId(video.id)}
             >
               {/* Top 10 Number overlay for first category */}
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 6bb20d6..c8d4384 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -77,7 +77,7 @@ export default function Home() {
     <div className="has-fixed-header" style={{minHeight: '100vh', background: 'linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%)', color: 'white'}}>
       {/* STICKY HEADER */}
       <div className="header-sticky bg-transparent overflow-hidden">
-        <div className="max-w-[980px] mx-auto pl-4 pr-4 py-4">
+        <div className="max-w-[920px] mx-auto pl-4 pr-4 py-4">
           <div className="flex items-center justify-between">
             {/* Left side - Logo */}
             <div className="flex items-center space-x-4">