Improve carousel and modal behavior for smoother video browsing

Adjust z-index for modals and carousels, introduce touch events for carousel navigation, and refine hover effects for video cards.

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/QCN70f2

client/src/components/bunny-video-modal.tsx

@@ -169,7 +169,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
   return (
     <div 
       className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
-      style={{ zIndex: 9999999, backgroundColor: '#1f2937' }}
+      style={{ zIndex: 999999999, backgroundColor: '#1f2937', position: 'fixed' }}
       onClick={handleBackdropClick}
     >
       <div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">

client/src/components/netflix-grid.tsx

@@ -220,7 +220,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             setIsLeftButtonHovered(false);
             stopAutoScroll();
           }}
-          className={`${isLeftButtonHovered ? 'flex' : 'hidden md:group-hover:flex'} absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
+          className="flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100"
           data-testid="button-scroll-left"
         >
           <ChevronLeft className="w-6 h-6 text-white" />
@@ -243,7 +243,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             setIsRightButtonHovered(false);
             stopAutoScroll();
           }}
-          className={`${isRightButtonHovered ? 'flex' : 'hidden md:group-hover:flex'} absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
+          className="flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-0 group-hover:opacity-100 hover:!opacity-100"
           data-testid="button-scroll-right"
         >
           <ChevronRight className="w-6 h-6 text-white" />
@@ -256,6 +256,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             e.stopPropagation();
             scroll('left');
           }}
+          onTouchStart={(e) => {
+            e.stopPropagation();
+            startAutoScroll('left');
+          }}
+          onTouchEnd={(e) => {
+            e.stopPropagation();
+            stopAutoScroll();
+          }}
           className="md:hidden absolute left-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
           data-testid="button-mobile-scroll-left"
         >
@@ -267,6 +275,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
             e.stopPropagation();
             scroll('right');
           }}
+          onTouchStart={(e) => {
+            e.stopPropagation();
+            startAutoScroll('right');
+          }}
+          onTouchEnd={(e) => {
+            e.stopPropagation();
+            stopAutoScroll();
+          }}
           className="md:hidden absolute right-1 top-[45%] -translate-y-1/2 w-10 h-10 z-40 bg-black/80 rounded-full flex items-center justify-center border border-white/30 shadow-lg"
           data-testid="button-mobile-scroll-right"
         >

client/src/components/vast-player.tsx

@@ -270,7 +270,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 9999999 }}>
+    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 999999999, position: 'fixed' }}>
       <div className="relative w-full max-w-6xl mx-4">
         {/* Close button */}
         <Button

client/src/components/video-card.tsx

@@ -168,7 +168,7 @@ 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 ? 50 : 'auto',
+        zIndex: isHovered ? 10 : 'auto',
         position: isHovered ? 'relative' : 'static'
       }}
       onMouseEnter={() => setIsHovered(true)}

client/src/components/video-modal.tsx

@@ -438,7 +438,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
   return (
     <div 
       className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
-      style={{ zIndex: 9999999 }}
+      style={{ zIndex: 999999999, position: 'fixed' }}
       onClick={handleBackdropClick}
       data-testid="modal-video"
     >