From 2ea13f5c10266c816979ca83128788effdb950a3 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:25:20 +0000
Subject: [PATCH] Adjust layering of carousel buttons and video cards

Update z-index values for carousel navigation buttons and video cards to prevent overlapping issues, specifically resolving the user's report of elements going under others.

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/kdQ95gE
---
 client/src/components/simple-carousel.tsx | 6 +++---
 client/src/components/video-card.tsx      | 2 +-
 client/src/index.css                      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/simple-carousel.tsx b/client/src/components/simple-carousel.tsx
index c9470d1..3a4d8e9 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-[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"
+          className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[100] 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-[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"
+          className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[100] 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>
@@ -135,7 +135,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
             {/* Create many copies for infinite feel */}
             {Array.from({ length: 20 }).map((_, copyIndex) => 
               category.videos.map((video, videoIndex) => (
-                <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-28 md:w-52 relative individual-video-hover hover:z-[9999]">
+                <div key={`${video.id}-${copyIndex}-${videoIndex}`} className="flex-shrink-0 w-28 md:w-52 relative individual-video-hover">
                   {/* Top 10 Number overlay for first category */}
                   {category.title.includes("Top 10") && (
                     <div className="absolute top-1 left-1 z-30 text-white font-black text-3xl md:text-5xl drop-shadow-2xl pointer-events-none individual-video-hover:opacity-0 transition-opacity duration-300"
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index a8329b2..4038c6b 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -168,7 +168,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         transformStyle: 'preserve-3d',
         transition: 'transform 0.3s ease',
         willChange: 'transform',
-        zIndex: isHovered ? 9999 : 1,
+        zIndex: isHovered ? 2147483647 : 1,
         position: 'relative'
       }}
       onMouseEnter={() => setIsHovered(true)}
diff --git a/client/src/index.css b/client/src/index.css
index 82318fe..cd021d7 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,9 +387,9 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Clean video card hover with moderate scaling */
+/* Maximum possible z-index for video card hover */
 .video-card:hover {
-  z-index: 9999 !important;
+  z-index: 2147483647 !important;
 }
 
 /* Hide picture-in-picture button on all video elements */