From fa28e5fecb7e67fe11784736b1867fc00af64965 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 18:19:37 +0000
Subject: [PATCH] Enhance video card hover effect with increased scale and
 overflow visibility

Update `VideoCard` component to add a hover effect that scales the card and manages body class for CSS-based overflow visibility. Modify CSS to apply scale and ensure overflow visibility on parent elements when the `video-card-hovered` class is present on the body.

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 | 10 ++++++++--
 client/src/index.css                 | 22 ++++++++--------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index bf98da8..52d3429 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -171,8 +171,14 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         zIndex: isHovered ? 999999 : 1,
         position: 'relative'
       }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseEnter={() => {
+        setIsHovered(true);
+        document.body.classList.add('video-card-hovered');
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        document.body.classList.remove('video-card-hovered');
+      }}
     >
       {/* Video preview container */}
       <div 
diff --git a/client/src/index.css b/client/src/index.css
index fe7b3af..d07dd47 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,27 +387,21 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Force all parent elements to be overflow visible when video card is hovered */
+/* Video card hover effect with maximum z-index */
 .video-card:hover {
   z-index: 2147483647 !important;
+  transform: scale(1.35) !important;
 }
 
-/* Force specific containers to be overflow visible when video is hovered */
-.carousel-track:has(.video-card:hover) {
+/* When video is being hovered (managed by JavaScript), make all containers overflow visible */
+body.video-card-hovered .carousel-track,
+body.video-card-hovered .netflix-grid-container,
+body.video-card-hovered div:not([class*="overflow-x-auto"]):not([class*="overflow-y-auto"]) {
   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) {
+/* Keep scroll functionality intact for horizontal scroll containers */
+body.video-card-hovered div[class*="overflow-x-auto"] {
   overflow-x: auto !important;
   overflow-y: visible !important;
 }