From 811188f4923f519dffdffaf1df37aca2609f2acc Mon Sep 17 00:00:00 2001 From: Thomas Hackner Date: Mon, 20 Jul 2026 08:55:20 +0200 Subject: [PATCH] =?UTF-8?q?Modal-Scroll:=20Backdrop=20scrollt,=20Panel=20w?= =?UTF-8?q?=C3=A4chst=20nat=C3=BCrlich=20(margin:auto)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die max-height/overflow-Variante griff beim Bewerbung-hinzufügen-Formular nicht zuverlässig. Stattdessen scrollt jetzt das Overlay selbst wie eine Seite; das Panel wächst auf natürliche Höhe und wird über margin:auto zentriert (kurzer Inhalt) bzw. ohne Top-Clipping erreichbar (langer Inhalt). Close- und Speichern-Button bleiben beide erreichbar. Co-Authored-By: Claude --- public/css/styles.css | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index f8fe516..6b2328b 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -452,12 +452,20 @@ button.loading::after { ============================================ */ /* Modals: the overlay locks body scroll (overflow:hidden on ), so a panel - taller than the viewport would have its bottom cut off and unreachable. Cap - the panel to the viewport and let it scroll internally; align the wrapper to - the top so the close button stays in reach instead of being clipped. This - applies on every screen size — the Bewerbung-hinzufügen form has enough fields - (Datum bis Interne Notizen) to overflow even on a laptop, not just a phone. */ + taller than the viewport would have its bottom cut off and the Save button + unreachable. Let the OVERLAY itself scroll like a page — the panel grows to + its natural height, and the overlay scrolls to reveal it. The panel uses + `margin:auto`, which centers a short panel but — unlike `align-items:center` + — does NOT clip the top when the panel is taller than the viewport (the + classic flexbox top-clip bug), so both the close button (top) and the Save + button (bottom) stay reachable. Applies on every screen size: the + Bewerbung-hinzufügen form has enough fields (Datum bis Interne Notizen) to + overflow even on a laptop, not just a phone. */ +.fixed.inset-0 { + overflow-y: auto !important; +} .fixed.inset-0 > .min-h-screen { + min-height: 100vh; align-items: flex-start !important; } .fixed.inset-0 > .min-h-screen > .max-w-lg, @@ -465,14 +473,12 @@ button.loading::after { .fixed.inset-0 > .min-h-screen > .max-w-2xl, .fixed.inset-0 > .min-h-screen > .max-w-3xl, .fixed.inset-0 > .min-h-screen > .max-w-4xl { - max-height: calc(100vh - 2rem) !important; - overflow-y: auto !important; + margin: auto !important; } @media (max-width: 640px) { .fixed.inset-0 > .min-h-screen > .max-w-lg, .fixed.inset-0 > .min-h-screen > .max-w-md { max-width: calc(100vw - 2rem) !important; - margin: 0 !important; } }