fix: constrain modals to viewport height with internal scrolling

Modal dialogs (e.g. the create-event form) grew beyond the screen and
scrolled the page behind them. Cap the card at the viewport height and
scroll the body inside it, keeping the header pinned.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/Modal.jsx

@@ -42,10 +42,10 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
         aria-modal="true"
         aria-labelledby={titleId}
         tabIndex={-1}
-        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} focus:outline-hidden`}
+        className={`relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full ${maxWidth} max-h-[calc(100vh-2rem)] flex flex-col focus:outline-hidden`}
       >
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border rounded-t-2xl shrink-0">
           <h2 id={titleId} className="text-lg font-semibold text-th-text">{title}</h2>
           <button
             type="button"
@@ -56,8 +56,8 @@ export default function Modal({ title, children, onClose, maxWidth = 'max-w-lg'
             <X size={20} />
           </button>
         </div>
-        {/* Body */}
+        {/* Body — scrolls inside the card instead of overflowing the viewport */}
-        <div className="p-6">
+        <div className="p-6 overflow-y-auto min-h-0">
           {children}
         </div>
       </div>