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
This commit is contained in:
2025-11-16 20:29:28 +00:00
parent 8ee17848a6
commit 493acdaeb4

View File

@@ -113,9 +113,9 @@ export function EventDetailModal({
<div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onClick={onClose}></div> <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onClick={onClose}></div>
{/* Modal panel */} {/* 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 */} {/* 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 items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<h2 className="text-2xl font-bold text-gray-900 mb-2">{event.title}</h2> <h2 className="text-2xl font-bold text-gray-900 mb-2">{event.title}</h2>
@@ -137,8 +137,8 @@ export function EventDetailModal({
</div> </div>
</div> </div>
{/* Content */} {/* Content - Scrollable */}
<div className="px-6 py-6 space-y-6"> <div className="px-6 py-6 space-y-6 overflow-y-auto flex-1">
{/* Event Details */} {/* Event Details */}
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start"> <div className="flex items-start">
@@ -263,7 +263,7 @@ export function EventDetailModal({
{/* Footer Actions */} {/* Footer Actions */}
{event.status === 'upcoming' && ( {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 ? ( {canComplete ? (
<div className="flex gap-3"> <div className="flex gap-3">
<button <button