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