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;