From 29d9ad3eec3d205ebf86bc2ba8d6071f7c88b9c5 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:15:46 +0000
Subject: [PATCH] Improve video card display when hovering over them

Update CSS and React component to enhance the visual feedback when a user hovers over a video card, ensuring it scales up and appears above other elements correctly.

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/components/video-card.tsx |  5 ++---
 client/src/index.css                 | 25 +++++++++----------------
 2 files changed, 11 insertions(+), 19 deletions(-)

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 (
     <div 
       data-testid={`card-video-${video.id}`}
-      className={`video-card transition-all duration-500 ease-out p-1 md:p-2 ${className}`}
+      className={`video-card transition-all duration-500 ease-out hover:scale-[1.35] p-1 md:p-2 ${className}`}
       style={{ 
         transformStyle: 'preserve-3d',
         transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease',
         willChange: 'transform',
         zIndex: isHovered ? 999999 : 1,
-        position: 'relative',
-        transform: isHovered ? 'scale(1.35) translateZ(0)' : 'scale(1) translateZ(0)'
+        position: 'relative'
       }}
       onMouseEnter={() => 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;