From 8716a2aae0e939054d7f3933226f46c232a53ea8 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 12:50:03 +0000
Subject: [PATCH] Improve scrolling experience by adjusting video grid spacing

Adjusted padding and margins in the Netflix grid component to allow for true edge-to-edge display of videos and ensure sufficient space for scroll buttons on various 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 | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 49d7153..08de1e2 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -158,33 +158,33 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         {category.title}
       </h2>
       
-      <div className="relative px-16">
+      <div className="relative">
         {/* Left scroll button */}
         <Button
           onClick={() => scroll('left')}
-          className="absolute -left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
+          className="absolute left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-10 h-10 md:w-12 md:h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
           size="sm"
         >
-          <ChevronLeft className="w-5 h-5" />
+          <ChevronLeft className="w-4 h-4 md:w-5 md:h-5" />
         </Button>
 
         {/* Right scroll button */}
         <Button
           onClick={() => scroll('right')}
-          className="absolute -right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-10 h-10 md:w-12 md:h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl"
           size="sm"
         >
-          <ChevronRight className="w-5 h-5" />
+          <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
         </Button>
 
-        {/* Scrollable video row - full width edge to edge */}
+        {/* Scrollable video row - true edge to edge */}
         <div
           ref={scrollRef}
-          className="flex space-x-3 overflow-x-auto scrollbar-hide pb-4 px-4"
+          className="flex gap-1 overflow-x-auto scrollbar-hide pb-4"
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (
-            <div key={video.id} className="flex-shrink-0 w-[45vw] sm:w-[35vw] md:w-[22vw] lg:w-[18vw] relative group">
+            <div key={video.id} className="flex-shrink-0 w-[calc(50vw-2px)] sm:w-[calc(33.33vw-2px)] md:w-[calc(25vw-2px)] lg:w-[calc(20vw-2px)] 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"