From ebd7d8952e5e9200d16e43e084a8638509b69542 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 14:20:38 +0000
Subject: [PATCH] Improve modal visibility by ensuring they appear on top of
 all other content

Increase the z-index of all modal components to 999999 to ensure proper stacking context and prevent overlap issues with other page elements.

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/mZpi7Z1
---
 client/src/components/ad-settings.tsx       | 2 +-
 client/src/components/bunny-video-modal.tsx | 4 ++--
 client/src/components/vast-player.tsx       | 2 +-
 client/src/components/video-modal.tsx       | 3 ++-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ad-settings.tsx b/client/src/components/ad-settings.tsx
index df99ff0..3ad2892 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 z-[9999] p-4">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 999999 }}>
       <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 7b8efcf..f4983a0 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -168,9 +168,9 @@ 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 z-[9999]"
+      className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
+      style={{ zIndex: 999999, backgroundColor: '#1f2937' }}
       onClick={handleBackdropClick}
-      style={{ backgroundColor: '#1f2937' }}
     >
       <div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">
         {/* Header with close button */}
diff --git a/client/src/components/vast-player.tsx b/client/src/components/vast-player.tsx
index 0dd079a..3422d4b 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 z-[9999]">
+    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 999999 }}>
       <div className="relative w-full max-w-6xl mx-4">
         {/* Close button */}
         <Button
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index cc6490f..de533b7 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -437,7 +437,8 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
 
   return (
     <div 
-      className="fixed inset-0 bg-black/90 backdrop-blur-sm z-[9999] flex items-center justify-center p-4"
+      className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
+      style={{ zIndex: 999999 }}
       onClick={handleBackdropClick}
       data-testid="modal-video"
     >