From d37e1da12b2f51f31fce04044b7b11cee65770b2 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 1 Sep 2025 17:03:43 +0000
Subject: [PATCH] Adjust button spacing to center content more effectively on
 larger screens

Update the 'ml' and 'mr' CSS classes for the scroll buttons in the Netflix grid component to add horizontal margins, effectively centering the content on larger displays.

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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index e46a98d..f6837a4 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -287,7 +287,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         <div className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] hidden md:block">
           <Button
             onClick={() => scroll('left')}
-            className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
+            className="gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 px-3 bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm ml-[160px] mr-[160px]"
             size="sm"
           >
             <ChevronLeft className="w-4 h-4" />