From 45722e057f8881678a8c1f38a35d62511cbce36b Mon Sep 17 00:00:00 2001 From: nessi Date: Fri, 6 Feb 2026 13:40:10 +0100 Subject: [PATCH] Refactor modal overlay styles for consistency and responsiveness Replaced top/left/right/bottom with a single "inset" property for cleaner and more concise code. Updated padding to account for safe areas dynamically and ensured box-sizing includes padding. Improved responsiveness by using percentages instead of viewport units for width and height. --- frontend/src/styles/styles.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/frontend/src/styles/styles.js b/frontend/src/styles/styles.js index 8770e5f..c8c7212 100644 --- a/frontend/src/styles/styles.js +++ b/frontend/src/styles/styles.js @@ -188,17 +188,15 @@ export const styles = { // Modal modalOverlay: { position: "fixed", - top: 0, - left: 0, - right: 0, - bottom: 0, - width: "100vw", - height: "100vh", + inset: 0, // statt top/left/right/bottom + width: "100%", // ✅ NICHT 100vw + height: "100%", // ✅ NICHT 100vh display: "flex", alignItems: "center", justifyContent: "center", - padding: 12, - zIndex: 2147483647, // wirklich ganz oben + 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))", + boxSizing: "border-box", // wichtig bei padding + zIndex: 2147483647, background: "rgba(0,0,0,0.72)", overflowY: "auto", },