From 50fa13147faef12452fd05dbbbfc71d62bfecda2 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 12:48:43 +0000
Subject: [PATCH] Improve video browsing experience with adaptive scrolling and
 full-width display

Adjusts `CategoryRow` component to utilize viewport width for scroll amounts and applies responsive widths to video cards, enhancing horizontal navigation across different screen sizes.

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 | 23 ++++++-----------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 55ad200..49d7153 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -136,20 +136,9 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
-      // 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;
-      }
+      // Viewport-based scroll amount for full-width cards
+      const containerWidth = scrollRef.current.clientWidth;
+      const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area
       
       const currentScroll = scrollRef.current.scrollLeft;
       const targetScroll = direction === 'left' 
@@ -188,14 +177,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           <ChevronRight className="w-5 h-5" />
         </Button>
 
-        {/* Scrollable video row */}
+        {/* Scrollable video row - full width edge to edge */}
         <div
           ref={scrollRef}
-          className="flex space-x-4 overflow-x-auto scrollbar-hide pb-4"
+          className="flex space-x-3 overflow-x-auto scrollbar-hide pb-4 px-4"
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-44 sm:w-56 md:w-80 relative group">
+            <div key={video.id} className="flex-shrink-0 w-[45vw] sm:w-[35vw] md:w-[22vw] lg:w-[18vw] 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-4xl sm:text-5xl md:text-7xl drop-shadow-2xl"