Fix EventDetailModal z-index issue causing blank grey page

This commit is contained in:
2025-11-16 20:50:46 +00:00
parent b208eb7f63
commit 9a0358d25e

View File

@@ -108,12 +108,12 @@ export function EventDetailModal({
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
{/* Background overlay */}
<div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onClick={onClose}></div>
{/* Modal panel */}
<div className="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full max-h-[90vh] overflow-hidden flex flex-col">
<div className="relative inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full max-h-[90vh] overflow-hidden flex flex-col z-10">
{/* Header */}
<div className="bg-white px-6 pt-6 pb-4 border-b border-gray-200 flex-shrink-0">
<div className="flex items-start justify-between">
@@ -140,12 +140,6 @@ export function EventDetailModal({
{/* Content - Scrollable */}
<div className="overflow-y-auto flex-1 bg-white">
<div className="px-6 py-6 space-y-6">
{/* DEBUG */}
<div className="bg-red-100 border-2 border-red-500 p-4">
<p className="text-red-900 font-bold">DEBUG: Modal Content Rendering</p>
<p className="text-sm">Event: {event.title}</p>
</div>
{/* Event Details */}
<div className="space-y-4">
<div className="flex items-start">