From 78ae5d8f5a9fdf0259f59c389ec7daa9cef1d0e6 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:10:02 +0000
Subject: [PATCH] Improve video pop-up display by adjusting layering and
 positioning

Update CSS to ensure videos on hover correctly layer above other content using a high z-index and relative positioning, including adjustments for parent containers to facilitate proper stacking and visibility.

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/index.css | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 1680570..506cae1 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,27 +387,23 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Force hover video to break out of all constraints */
+/* Working hover video pop-up with maximum z-index */
 .individual-video-hover:hover {
-  z-index: 9999 !important;
+  z-index: 2147483647 !important;
   position: relative !important;
   transform: scale(1.05) !important;
   transition: all 0.3s ease !important;
-  contain: none !important;
-  clip-path: none !important;
-  isolation: auto !important;
 }
 
-/* Force parent containers to be overflow visible when child is hovered */
-*:has(.individual-video-hover:hover) {
-  overflow: visible !important;
-  clip-path: none !important;
+/* Ensure all carousel containers allow z-index layering */
+.individual-video-hover {
+  position: relative;
 }
 
-/* Special handling for scroll containers - allow both horizontal scroll and vertical visibility */
-[class*="overflow-x-auto"]:has(.individual-video-hover:hover) {
-  overflow-x: auto !important;
-  overflow-y: visible !important;
+/* Force all parent divs to allow z-index stacking */
+div:has(.individual-video-hover:hover) {
+  position: relative !important;
+  z-index: auto !important;
 }
 
 /* Hide picture-in-picture button on all video elements */