From 9a0358d25ec61e520568380c1b12bab9ceac9b5b Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 20:50:46 +0000
Subject: [PATCH] Fix EventDetailModal z-index issue causing blank grey page

---
 src/components/event/EventDetailModal.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/event/EventDetailModal.tsx b/src/components/event/EventDetailModal.tsx
index 7f526fb..603b9f6 100644
--- a/src/components/event/EventDetailModal.tsx
+++ b/src/components/event/EventDetailModal.tsx
@@ -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">