From fcd73d0667fa2eee2fe5d2d84ef0369aff2781d4 Mon Sep 17 00:00:00 2001
From: Michelle <michelle.winkler@miichelle.moe>
Date: Fri, 17 Jul 2026 09:33:21 +0200
Subject: [PATCH] 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 | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 03a31fe..045507b 100644
--- a/src/components/Modal.jsx
+++ b/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 */}
-        <div className="p-6">
+        {/* Body — scrolls inside the card instead of overflowing the viewport */}
+        <div className="p-6 overflow-y-auto min-h-0">
           {children}
         </div>
       </div>