thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modal-Scroll: Backdrop scrollt, Panel wächst natürlich (margin:auto)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-20 08:55:20 +02:00
co-authored by Claude
parent 1c913b2b28
commit 811188f492
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+14 -8
View File
@@ -452,12 +452,20 @@ button.loading::after {
============================================ */ ============================================ */
/* Modals: the overlay locks body scroll (overflow:hidden on <body>), so a panel /* Modals: the overlay locks body scroll (overflow:hidden on <body>), so a panel
taller than the viewport would have its bottom cut off and unreachable. Cap taller than the viewport would have its bottom cut off and the Save button
the panel to the viewport and let it scroll internally; align the wrapper to unreachable. Let the OVERLAY itself scroll like a page — the panel grows to
the top so the close button stays in reach instead of being clipped. This its natural height, and the overlay scrolls to reveal it. The panel uses
applies on every screen size — the Bewerbung-hinzufügen form has enough fields `margin:auto`, which centers a short panel but — unlike `align-items:center`
(Datum bis Interne Notizen) to overflow even on a laptop, not just a phone. */ — 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 { .fixed.inset-0 > .min-h-screen {
min-height: 100vh;
align-items: flex-start !important; align-items: flex-start !important;
} }
.fixed.inset-0 > .min-h-screen > .max-w-lg, .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-2xl,
.fixed.inset-0 > .min-h-screen > .max-w-3xl, .fixed.inset-0 > .min-h-screen > .max-w-3xl,
.fixed.inset-0 > .min-h-screen > .max-w-4xl { .fixed.inset-0 > .min-h-screen > .max-w-4xl {
max-height: calc(100vh - 2rem) !important; margin: auto !important;
overflow-y: auto !important;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.fixed.inset-0 > .min-h-screen > .max-w-lg, .fixed.inset-0 > .min-h-screen > .max-w-lg,
.fixed.inset-0 > .min-h-screen > .max-w-md { .fixed.inset-0 > .min-h-screen > .max-w-md {
max-width: calc(100vw - 2rem) !important; max-width: calc(100vw - 2rem) !important;
margin: 0 !important;
} }
} }