From dde1b37180c1ed1b5810c3cf053a213837d9cfea Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:38:22 +0000
Subject: [PATCH] Improve carousel scrolling and modal display across the
 platform

Update z-index for modals to ensure they display correctly, adjust carousel scroll amount and behavior, and refine video card z-indexing.

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/ad-settings.tsx       |  2 +-
 client/src/components/bunny-video-modal.tsx |  4 ++--
 client/src/components/netflix-grid.tsx      | 15 +++------------
 client/src/components/vast-player.tsx       |  2 +-
 client/src/components/video-card.tsx        |  2 +-
 client/src/components/video-modal.tsx       |  4 ++--
 client/src/index.css                        | 15 +++++++++++++++
 7 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/client/src/components/ad-settings.tsx b/client/src/components/ad-settings.tsx
index 4c9d8d8..ba15e05 100644
--- a/client/src/components/ad-settings.tsx
+++ b/client/src/components/ad-settings.tsx
@@ -116,7 +116,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 9999999 }}>
+    <div className="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 2147483647, position: 'fixed' }}>
       <div className="bg-white dark:bg-gray-900 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
         <div className="sticky top-0 bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center justify-between">
diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index cc83842..d0527c7 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -168,8 +168,8 @@ 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: 999999999, backgroundColor: '#1f2937', position: 'fixed' }}
+      className="modal-overlay fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
+      style={{ zIndex: 2147483647, 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 0d083e5..9c66d4b 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -141,22 +141,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     if (scrollRef.current) {
       const isMobile = window.innerWidth < 768;
       const containerWidth = scrollRef.current.clientWidth;
-      const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.6;
-      const currentScroll = scrollRef.current.scrollLeft;
-      const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
-      
-      let targetScroll;
+      const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.7;
       
       if (direction === 'left') {
-        targetScroll = Math.max(0, currentScroll - scrollAmount);
+        scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
       } else {
-        targetScroll = Math.min(maxScroll, currentScroll + scrollAmount);
+        scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
       }
-        
-      scrollRef.current.scrollTo({
-        left: targetScroll,
-        behavior: 'smooth'
-      });
     }
   };
 
diff --git a/client/src/components/vast-player.tsx b/client/src/components/vast-player.tsx
index 9370428..fdc4a8c 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: 999999999, position: 'fixed' }}>
+    <div className="modal-overlay fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 2147483647, 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 98d8b7e..2a54e09 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 ? 10 : 'auto',
+        zIndex: isHovered ? 5 : 1,
         position: isHovered ? 'relative' : 'static'
       }}
       onMouseEnter={() => setIsHovered(true)}
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index bf83dfc..f75632d 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -437,8 +437,8 @@ 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: 999999999, position: 'fixed' }}
+      className="modal-overlay fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
+      style={{ zIndex: 2147483647, position: 'fixed' }}
       onClick={handleBackdropClick}
       data-testid="modal-video"
     >
diff --git a/client/src/index.css b/client/src/index.css
index 285bc4d..79dae25 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -163,6 +163,21 @@
   .animation-delay-150 {
     animation-delay: 150ms;
   }
+
+  /* Force modal z-index above everything */
+  .modal-overlay {
+    z-index: 2147483647 !important;
+    position: fixed !important;
+  }
+  
+  /* Keep video cards low */
+  .video-card {
+    z-index: 1 !important;
+  }
+  
+  .video-card:hover {
+    z-index: 5 !important;
+  }
 }
 
 /* Video edit modal styles */