nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor modal overlay styles for consistency and responsiveness

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-06 13:40:10 +01:00
parent dc98eeb41c
commit 45722e057f
1 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/styles/styles.js
View File

@@ -188,17 +188,15 @@ export const styles = {
// Modal // Modal
modalOverlay: { modalOverlay: {
position: "fixed", 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", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "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)", background: "rgba(0,0,0,0.72)",
overflowY: "auto", overflowY: "auto",
}, },