From ee5cef064500bd045ba02207ff0275d88942f2d4 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:33:18 +0000
Subject: [PATCH] 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 |  2 +-
 client/src/components/netflix-grid.tsx      | 20 ++++++++++++++++++--
 client/src/components/vast-player.tsx       |  2 +-
 client/src/components/video-card.tsx        |  2 +-
 client/src/components/video-modal.tsx       |  2 +-
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 68f0187..cc83842 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/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">
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 74e5a60..0d083e5 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/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"
         >
diff --git a/client/src/components/vast-player.tsx b/client/src/components/vast-player.tsx
index 7c37307..9370428 100644
--- a/client/src/components/vast-player.tsx
+++ b/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
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 527532e..98d8b7e 100644
--- a/client/src/components/video-card.tsx
+++ b/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)}
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 529f360..bf83dfc 100644
--- a/client/src/components/video-modal.tsx
+++ b/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"
     >