diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index eedf523..bf98da8 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -163,14 +163,13 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
return (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
diff --git a/client/src/index.css b/client/src/index.css
index 931ae16..7f52da1 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,25 +387,18 @@ input[data-testid*="search"]::placeholder {
opacity: 0;
}
-/* Create stacking context for main container */
-.netflix-grid-container {
- overflow: visible !important;
- position: relative;
- z-index: 1;
-}
-
-/* Create stacking context for each carousel */
-.carousel-track {
- overflow: visible !important;
- position: relative;
- z-index: 2;
-}
-
-/* Ensure video cards can pop above everything */
-.video-card:hover {
+/* Force all parent elements to be overflow visible when video card is hovered */
+.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) * {
+ overflow: visible !important;
+}
+
/* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button {
display: none !important;