From 1839100f6d1efbaaede5156f9f213a82df5a6cbf Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 15:25:58 +0000
Subject: [PATCH] Adjust video card display and container width for better
 content visibility

Updates the maximum width of the main content container and the width of individual video cards in the Netflix grid component to improve layout and display of multiple items.

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 | 4 ++--
 client/src/pages/home.tsx              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 1551933..44fd9df 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -249,7 +249,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
           ref={scrollRef}
           className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 pl-4 pr-4"
           style={{ 
-            maxWidth: '1300px', 
+            maxWidth: '1100px', 
             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-[300px] md:w-[300px] lg:w-[300px] xl:w-[300px] relative group hover:z-30"
+              className="flex-shrink-0 w-[260px] md:w-[260px] lg:w-[260px] xl:w-[260px] 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 1978a2e..ca9e827 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-[1200px] mx-auto pl-4 pr-4 py-4">
+        <div className="max-w-[1100px] 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">