From f7b9d034ca60cbe0414c5602b7ec003555e0a696 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:18:57 +0000
Subject: [PATCH] Improve video display layering and visibility during
 interactions

Adjust CSS to ensure video elements and their containers display correctly when hovered over, preventing overlap issues by setting appropriate z-index values and managing overflow properties for various container types.

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 | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index ae00bd8..fe7b3af 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -389,16 +389,29 @@ input[data-testid*="search"]::placeholder {
 
 /* Force all parent elements to be overflow visible when video card is hovered */
 .video-card:hover {
-  z-index: 999999 !important;
+  z-index: 2147483647 !important;
 }
 
-/* Only target specific carousel containers, not scroll containers */
-.carousel-track:has(.video-card:hover),
-.netflix-grid-container:has(.video-card:hover),
-div:has(.video-card:hover):not([class*="overflow-x-auto"]):not([class*="overflow-y-auto"]) {
+/* Force specific containers to be overflow visible when video is hovered */
+.carousel-track:has(.video-card:hover) {
   overflow: visible !important;
 }
 
+.netflix-grid-container:has(.video-card:hover) {
+  overflow: visible !important;
+}
+
+/* Force parent divs to be overflow visible, but exclude scroll containers */
+div:has(.video-card:hover) {
+  overflow: visible !important;
+}
+
+/* Restore scroll behavior only for horizontal scroll containers */
+div[class*="overflow-x-auto"]:has(.video-card:hover) {
+  overflow-x: auto !important;
+  overflow-y: visible !important;
+}
+
 /* Hide picture-in-picture button on all video elements */
 video::-webkit-media-controls-picture-in-picture-button {
   display: none !important;