From 493acdaeb40e32cbd2675846e3fa2a6f5fdd1ffb Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 20:29:28 +0000
Subject: [PATCH] Fix event detail modal scrolling and layout

- Make modal content scrollable with proper flex layout
- Set max height to 90vh to prevent overflow
- Keep header and footer fixed while content scrolls
- Ensures all event details are visible and accessible
---
 src/components/event/EventDetailModal.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/event/EventDetailModal.tsx b/src/components/event/EventDetailModal.tsx
index a18e009..46c7398 100644
--- a/src/components/event/EventDetailModal.tsx
+++ b/src/components/event/EventDetailModal.tsx
@@ -113,9 +113,9 @@ export function EventDetailModal({
         <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 overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
+        <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">
           {/* Header */}
-          <div className="bg-white px-6 pt-6 pb-4 border-b border-gray-200">
+          <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">
               <div className="flex-1">
                 <h2 className="text-2xl font-bold text-gray-900 mb-2">{event.title}</h2>
@@ -137,8 +137,8 @@ export function EventDetailModal({
             </div>
           </div>
 
-          {/* Content */}
-          <div className="px-6 py-6 space-y-6">
+          {/* Content - Scrollable */}
+          <div className="px-6 py-6 space-y-6 overflow-y-auto flex-1">
             {/* Event Details */}
             <div className="space-y-4">
               <div className="flex items-start">
@@ -263,7 +263,7 @@ export function EventDetailModal({
 
           {/* Footer Actions */}
           {event.status === 'upcoming' && (
-            <div className="bg-gray-50 px-6 py-4 border-t border-gray-200">
+            <div className="bg-gray-50 px-6 py-4 border-t border-gray-200 flex-shrink-0">
               {canComplete ? (
                 <div className="flex gap-3">
                   <button