diff --git a/assets/css/app.css b/assets/css/app.css
index bb23c83da..a1874a44a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -88,6 +88,11 @@
 	--bs-success-rgb: var(--bs-primary-rgb);
 	--bs-code-color: var(--evcc-darkest-green);
 	--evcc-backdrop: #93949eaa; /* --bs-gray-medium + transparent */
+
+	--safe-area-inset-top: env(safe-area-inset-top, 0px);
+	--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+	--safe-area-inset-left: env(safe-area-inset-left, 0px);
+	--safe-area-inset-right: env(safe-area-inset-right, 0px);
 }
 
 :root.dark {
@@ -607,8 +612,8 @@ html.app .hide-in-app {
 }
 
 html.app .safe-area-inset {
-	padding: max(1rem, env(safe-area-inset-top)) env(safe-area-inset-right)
-		calc(0.5 * env(safe-area-inset-bottom)) env(safe-area-inset-left);
+	padding: max(1rem, var(--safe-area-inset-top)) var(--safe-area-inset-right)
+		var(--safe-area-inset-bottom) var(--safe-area-inset-left);
 	position: relative;
 }
 
@@ -619,15 +624,15 @@ html.app .safe-area-inset::before {
 	top: 0;
 	left: 0;
 	right: 0;
-	height: env(safe-area-inset-top);
+	height: var(--safe-area-inset-top);
 	z-index: 1000;
 	opacity: 0.9;
 	background-color: var(--evcc-background);
 }
 
 html.app .modal-dialog {
-	margin-top: env(safe-area-inset-top);
-	margin-bottom: env(safe-area-inset-bottom);
+	margin-top: var(--safe-area-inset-top);
+	margin-bottom: var(--safe-area-inset-bottom);
 }
 
 .btn-neutral {