frontend/src/styles/styles.js

@@ -188,17 +188,15 @@ export const styles = {
   // Modal
   modalOverlay: {
     position: "fixed",
-    top: 0,
+    inset: 0,                  // statt top/left/right/bottom
-    left: 0,
+    width: "100%",             // ✅ NICHT 100vw
-    right: 0,
+    height: "100%",            // ✅ NICHT 100vh
-    bottom: 0,
-    width: "100vw",
-    height: "100vh",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: 12,
+    padding: "calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))",
-    zIndex: 2147483647, // wirklich ganz oben
+    boxSizing: "border-box",   // wichtig bei padding
+    zIndex: 2147483647,
     background: "rgba(0,0,0,0.72)",
     overflowY: "auto",
   },