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; } }