Improve video card scaling and carousel element visibility

Adjusted carousel container and card styles for better visual presentation and hover effects.

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

client/src/components/video-card.tsx

@@ -163,12 +163,12 @@ 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 hover:scale-[1.35] p-1 md:p-2 ${className}`}
+      className={`video-card transition-all duration-300 ease-out hover:scale-110 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',
+        transition: 'transform 0.3s ease',
         willChange: 'transform',
-        zIndex: isHovered ? 999999999 : 1,
+        zIndex: isHovered ? 9999 : 1,
         position: 'relative'
       }}
       onMouseEnter={() => setIsHovered(true)}

client/src/index.css

@@ -387,9 +387,9 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Simple video card hover - just z-index, no overflow changes */
+/* Clean video card hover with moderate scaling */
 .video-card:hover {
-  z-index: 999999999 !important;
+  z-index: 9999 !important;
 }
 
 /* Hide picture-in-picture button on all video elements */