From 30b8be3502daca50ad6640e032b6360bcb8e1331 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 12:46:46 +0000
Subject: [PATCH] Adjust video display and scrolling for improved mobile
 viewing

Update CSS and JavaScript to implement responsive card widths, adjust scroll amounts for different screen sizes (mobile, tablet, desktop), and modify hover effects for a better user experience on mobile devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/6upLu3q
---
 client/src/components/netflix-grid.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index d1e3631..55ad200 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -136,9 +136,21 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // Responsive scroll amount - wider cards on desktop
-      const isMobile = window.innerWidth < 768;
-      const scrollAmount = isMobile ? 240 : 336; // Mobile: 224px + gap, Desktop: 320px + gap
+      // Responsive scroll amount - different sizes for mobile/tablet/desktop
+      const width = window.innerWidth;
+      let scrollAmount;
+      
+      if (width < 640) {
+        // Mobile: smaller cards (176px + gap)
+        scrollAmount = 192;
+      } else if (width < 768) {
+        // Small tablet: medium cards (224px + gap)
+        scrollAmount = 240;
+      } else {
+        // Desktop: large cards (320px + gap)
+        scrollAmount = 336;
+      }
+      
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
         ? currentScroll - scrollAmount 
@@ -183,10 +195,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-56 md:w-80 relative group">
+            <div key={video.id} className="flex-shrink-0 w-44 sm:w-56 md:w-80 relative group">
               {/* Top 10 Number overlay for first category */}
               {category.title.includes("Top 10") && index < 10 && (
-                <div className="absolute top-2 left-2 z-20 text-white font-black text-5xl md:text-7xl drop-shadow-2xl"
+                <div className="absolute top-2 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"
                      style={{ 
                        textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
                        WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
@@ -197,7 +209,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
               <VideoCard
                 video={video}
                 onClick={onVideoClick}
-                className="w-full hover:scale-110 hover:z-10 transition-all duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
+                className="w-full hover:scale-105 md:hover:scale-110 hover:z-10 transition-all duration-300 md:duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
               />
             </div>
           ))}