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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user