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
This commit is contained in:
sebastjanartic 2025-09-03 09:02:19 +00:00
parent 10dd4ad073
commit 2a0faf1521

View File

@ -570,18 +570,36 @@ export default function VideoPage() {
{/* Left dot */} {/* Left dot */}
<button <button
onClick={() => navigateToVideo('prev')} 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" aria-label="Previous video"
/> />
{/* Center dot - always active */} {/* Center dot - always active */}
<button <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" aria-label="Current video"
/> />
{/* Right dot */} {/* Right dot */}
<button <button
onClick={() => navigateToVideo('next')} 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" aria-label="Next video"
/> />
</div> </div>