From 37226425319de532f3f8ae8346f273cefe1464a0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 08:27:54 +0000
Subject: [PATCH] Improve the appearance of navigation dots on mobile devices

Adjust the size and spacing of mobile navigation dots in the Netflix grid component to enhance visual appeal and adhere to design requirements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
---
 client/src/components/netflix-grid.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index fff6f27..aa66edf 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -384,7 +384,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
         </div>
         
         {/* Mobile navigation dots - only visible on mobile, under all video rows */}
-        <div className="md:hidden flex justify-center mt-4 space-x-2">
+        <div className="md:hidden flex justify-center mt-3 gap-1">
           {Array.from({ length: Math.min(10, category.videos.length) }, (_, index) => (
             <button
               key={index}
@@ -404,9 +404,11 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
                   : 'bg-white/15 hover:bg-white/25'
               }`}
               style={{
-                width: '3px',
-                height: '3px',
-                transform: index === currentIndex ? 'scale(1.3)' : 'scale(1)'
+                width: '1.5px',
+                height: '1.5px',
+                minWidth: '1.5px',
+                minHeight: '1.5px',
+                transform: index === currentIndex ? 'scale(1.5)' : 'scale(1)'
               }}
               aria-label={`Go to card ${index + 1}`}
             />