From 8501ea9b5bf27e504c4f32bf4bae27bb972cc4cb Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 17:58:47 +0000
Subject: [PATCH] Improve carousel button visibility and video overlay behavior

Increase z-index for carousel navigation buttons to ensure they appear above other content and adjust CSS to prevent videos from overlaying interactive elements on hover.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/yexZbDm
---
 client/src/components/simple-carousel.tsx | 4 ++--
 client/src/index.css                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index 45a67cf..928104c 100644
--- a/client/src/components/simple-carousel.tsx
+++ b/client/src/components/simple-carousel.tsx
@@ -107,7 +107,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
           onClick={() => scroll('left')}
           onMouseEnter={() => startAutoScroll('left')}
           onMouseLeave={stopAutoScroll}
-          className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
+          className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[10000] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
         >
           <ChevronLeft className="w-6 h-6 text-white" />
         </button>
@@ -117,7 +117,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
           onClick={() => scroll('right')}
           onMouseEnter={() => startAutoScroll('right')}
           onMouseLeave={stopAutoScroll}
-          className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
+          className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[10000] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
         >
           <ChevronRight className="w-6 h-6 text-white" />
         </button>
diff --git a/client/src/index.css b/client/src/index.css
index 1a0ba30..df47c19 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,8 +387,8 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Force hover video above everything */
-.individual-video-hover:hover {
+/* Force hover video above everything - but not buttons */
+.individual-video-hover:hover:not(button):not([role="button"]) {
   z-index: 9999 !important;
   position: relative !important;
   transform: scale(1.05) !important;