From 0099ea4b84acb7ed55732f42d4dede92d225c91c Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 22:17:31 +0000
Subject: [PATCH] Fix z-index for ReportDetailModal to appear above map
 elements

---
 src/components/report/ReportDetailModal.tsx | 4 ++--
 src/pages/MapPage.tsx                       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/report/ReportDetailModal.tsx b/src/components/report/ReportDetailModal.tsx
index d68cf0f..10013c6 100644
--- a/src/components/report/ReportDetailModal.tsx
+++ b/src/components/report/ReportDetailModal.tsx
@@ -101,7 +101,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
   };
 
   return (
-    <div className="fixed inset-0 z-50 overflow-y-auto">
+    <div className="fixed inset-0 z-[9999] overflow-y-auto">
       {/* Backdrop */}
       <div 
         className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
@@ -110,7 +110,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
 
       {/* Modal */}
       <div className="flex min-h-full items-center justify-center p-4">
-        <div className="relative bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="relative bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto z-[10000]">
           {/* Close Button */}
           <button
             onClick={onClose}
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index d8ef92a..5e94ff2 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -459,7 +459,7 @@ export function MapPage() {
 
       {/* Loading indicator for report details */}
       {isLoadingReport && selectedReportId && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999]">
           <div className="bg-white p-6 rounded-lg shadow-xl">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
             <p className="mt-4 text-gray-600">Loading report details...</p>