From 5bb9153c991935a3da174b7eec52f373c8b642bd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:18:05 +0000
Subject: [PATCH] Improve video card display behavior when hovering within
 carousels

Refactor CSS selectors in `client/src/index.css` to more precisely target parent elements for overflow visibility when hovering over video cards, specifically within carousel and grid containers, avoiding unintended overflow changes on general scrollable elements.

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

diff --git a/client/src/index.css b/client/src/index.css
index 7f52da1..ae00bd8 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -388,14 +388,14 @@ input[data-testid*="search"]::placeholder {
 }
 
 /* Force all parent elements to be overflow visible when video card is hovered */
-.video-card:hover,
-.video-card:hover * {
+.video-card:hover {
   z-index: 999999 !important;
 }
 
-/* Force all ancestors to show overflow when video is hovered */
-body:has(.video-card:hover) *,
-html:has(.video-card:hover) * {
+/* 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"]) {
   overflow: visible !important;
 }