From 0b6ca2c22f1ece29c7fea0bf68f99e2c4d7af0a9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 16:16:59 +0000
Subject: [PATCH] Adjust video card sizes and improve scrolling behavior

Updates video card widths from 220px to 200px, adjusts scroll calculations accordingly, and modifies the hover scale effect for video cards in NetflixGrid.

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 | 6 +++---
 client/src/index.css                   | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 26d4676..d9dadc5 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 (220px + 16px gap = 236px per card)
-      const cardWidth = 220 + 16; // card width + gap
+      // Scroll exactly 4 cards (200px + 16px gap = 216px per card)
+      const cardWidth = 200 + 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-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-50"
+              className="flex-shrink-0 w-[200px] md:w-[200px] lg:w-[200px] xl:w-[200px] relative group hover:z-50"
               onMouseEnter={() => setClickedVideoId(video.id)}
             >
               {/* Top 10 Number overlay for first category */}
diff --git a/client/src/index.css b/client/src/index.css
index 3f7b881..83892f2 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -226,7 +226,7 @@ input[data-testid*="search"]::placeholder {
 
 /* Video card hover effects with gradients */
 .video-card:hover {
-  transform: translateY(-2px) scale(1.05);
+  transform: translateY(-2px) scale(1.02);
   transition: all 0.3s ease;
   z-index: 1000;
   position: relative;