Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix z-index for ReportDetailModal to appear above map elements

Browse Source
This commit is contained in:
Paul Bailey
2025-11-16 22:17:31 +00:00
parent 5c8b66cb0c
commit 0099ea4b84
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/report/ReportDetailModal.tsx
View File

@@ -101,7 +101,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
}; };
return ( return (
<div className="fixed inset-0 z-50 overflow-y-auto"> <div className="fixed inset-0 z-[9999] overflow-y-auto">
{/* Backdrop */} {/* Backdrop */}
<div <div
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity" className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
@@ -110,7 +110,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Modal */} {/* Modal */}
<div className="flex min-h-full items-center justify-center p-4"> <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 */} {/* Close Button */}
<button <button
onClick={onClose} onClick={onClose}

2
src/pages/MapPage.tsx
View File

@@ -459,7 +459,7 @@ export function MapPage() {
{/* Loading indicator for report details */} {/* Loading indicator for report details */}
{isLoadingReport && selectedReportId && ( {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="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> <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> <p className="mt-4 text-gray-600">Loading report details...</p>