From 1e83a546b2fd1d6654cff2d80f7d36588211c036 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 20:12:13 +0000
Subject: [PATCH] Improve video grid layout by adjusting spacing and
 positioning

Adjusted left and right padding for category titles and scrollable video rows to achieve full edge-to-edge display in the `netflix-grid.tsx` component, enhancing visual presentation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
---
 client/src/components/netflix-grid.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 6812b34..29e04de 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -239,11 +239,11 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
       className="relative group"
       onMouseLeave={() => setClickedVideoId(null)}
     >
-      <h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase">
+      <h2 className="text-lg font-medium text-bunny-light mb-1 mx-12 leading-tight uppercase">
         {category.title}
       </h2>
       <div className="relative overflow-hidden">
-        {/* Left scroll button - only on desktop and not hidden */}
+        {/* Left scroll button - positioned at container edge */}
         {!hideScrollButtons && (
           <Button
             onClick={() => scroll('left')}
@@ -256,7 +256,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
           </Button>
         )}
 
-        {/* Right scroll button - only on desktop and not hidden */}
+        {/* Right scroll button - positioned at container edge */}
         {!hideScrollButtons && (
           <Button
             onClick={() => scroll('right')}
@@ -268,11 +268,10 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
             <ChevronRight className="w-6 h-6" />
           </Button>
         )}
-
-        {/* Scrollable video row - true edge to edge */}
+        {/* Scrollable video row - full width from edge to edge */}
         <div
           ref={scrollRef}
-          className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-2"
+          className="flex gap-3 overflow-x-auto scrollbar-hide pb-0 px-12"
           style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
         >
           {category.videos.map((video, index) => (