Improve video card display and carousel interaction on hover

Adjust z-index values for video cards and carousel containers, simplifying hover effect logic in CSS and component code.

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/simple-carousel.tsx

@@ -96,12 +96,12 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
   }, [category.videos.length]);
 
   return (
-    <div className="relative group mb-8 carousel-track" style={{ overflow: 'visible' }}>
+    <div className="relative group mb-8" style={{ overflow: 'visible', zIndex: 1 }}>
       <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
         {category.title}
       </h2>
       
-      <div className="relative -mx-8 px-8" style={{ overflow: 'visible' }}>
+      <div className="relative" style={{ overflow: 'visible', zIndex: 1 }}>
         {/* Left scroll button */}
         <button
           onClick={() => scroll('left')}
@@ -125,14 +125,15 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
         {/* Scroll container */}
         <div 
           ref={scrollContainerRef}
-          className="overflow-x-auto -mx-4 px-4"
+          className="overflow-x-auto"
           style={{ 
             overflowY: 'visible',
             scrollbarWidth: 'none', 
-            msOverflowStyle: 'none'
+            msOverflowStyle: 'none',
+            zIndex: 1
           }}
         >
-          <div className="flex space-x-4 pb-4 w-max -my-4 py-4" style={{ overflow: 'visible' }}>
+          <div className="flex space-x-4 pb-4 w-max" style={{ overflow: 'visible', zIndex: 1 }}>
             {/* Create many copies for infinite feel */}
             {Array.from({ length: 20 }).map((_, copyIndex) => 
               category.videos.map((video, videoIndex) => (

client/src/components/video-card.tsx

@@ -168,17 +168,11 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         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,
+        zIndex: isHovered ? 999999999 : 1,
         position: 'relative'
       }}
-      onMouseEnter={() => {
-        setIsHovered(true);
-        document.body.classList.add('video-card-hovered');
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-        document.body.classList.remove('video-card-hovered');
-      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
       {/* Video preview container */}
       <div 

client/src/index.css

@@ -387,23 +387,9 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Video card hover effect with maximum z-index */
+/* Simple video card hover - just z-index, no overflow changes */
 .video-card:hover {
-  z-index: 2147483647 !important;
-  transform: scale(1.35) !important;
-}
-
-/* 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;
-}
-
-/* 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;
+  z-index: 999999999 !important;
 }
 
 /* Hide picture-in-picture button on all video elements */