Modal-Scroll: Wrapper als definite-height Scroll-Container (Safari-safe)

Ursache: Tailwinds min-h-screen (min-height:100vh) am Flex-Wrapper wächst
in Safari nicht mit dem Panel – das Panel ragt sichtbar aus dem Bild, der
Container meldet aber keinen Overflow → nichts scrollt, Speichern-Button
ist unerreichbar (Chromium wächst dagegen mit, daher dort scheinbar ok).

Fix: Die innere .min-h-screen-Box wird zum Scroll-Container mit
DEFINITE height:100vh + overflow-y:auto (+ -webkit-overflow-scrolling:touch).
Der Backdrop hält overflow:hidden. margin:auto am Panel zentriert kurze
Modals und vermeidet Top-Clipping bei langen. Wirkt in Safari, Chrome,
Firefox, iOS und Android (verifiziert via Chromium desktop + iPhone-Touch).

Zusätzlich Cache-Busting für styles.css (?v=<mtime>) am <link>, damit ein
hart zwischengespeichertes altes Stylesheet nach einem Deploy garantiert
neu geladen wird.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-07-20 09:14:12 +02:00
co-authored by Claude
parent 811188f492
commit a6a2fabf05
3 changed files with 28 additions and 12 deletions
+1 -1
View File
@@ -20,4 +20,4 @@
tailwind.config = { darkMode: 'class' };
</script>
<!-- Custom CSS -->
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="/css/styles.css?v=<%= assetVersion %>">