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

@@ -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 */}