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" > @@ -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" > 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;