From 2a0faf1521a0ff10e922bb083f8a1ffe93a70ecd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Wed, 3 Sep 2025 09:02:19 +0000
Subject: [PATCH] Adjust video player navigation dots to a consistent size

Update the CSS for the video player navigation dots in VideoPage.tsx, removing fixed width and height Tailwind classes and applying inline styles for consistent 8px dimensions.

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/pages/VideoPage.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index e326fd4..55d63c1 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -570,18 +570,36 @@ export default function VideoPage() {
                 {/* Left dot */}
                 <button
                   onClick={() => navigateToVideo('prev')}
-                  className="w-2 h-2 rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    minWidth: '8px',
+                    minHeight: '8px'
+                  }}
                   aria-label="Previous video"
                 />
                 {/* Center dot - always active */}
                 <button
-                  className="w-2 h-2 rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  className="rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    minWidth: '8px',
+                    minHeight: '8px'
+                  }}
                   aria-label="Current video"
                 />
                 {/* Right dot */}
                 <button
                   onClick={() => navigateToVideo('next')}
-                  className="w-2 h-2 rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
+                  style={{
+                    width: '8px',
+                    height: '8px',
+                    minWidth: '8px',
+                    minHeight: '8px'
+                  }}
                   aria-label="Next video"
                 />
               </div>