diff --git a/assets/css/app.css b/assets/css/app.css
index 903282af07..e8911ac08d 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -484,8 +484,22 @@ html.app .hide-in-app {
 }
 
 .safe-area-inset {
-	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
-		env(safe-area-inset-left);
+	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);
+	position: relative;
+}
+
+.safe-area-inset::before {
+	content: "";
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: env(safe-area-inset-top);
+	z-index: 1000;
+	opacity: 0.9;
+	background-color: var(--evcc-background);
 }
 
 .modal-dialog {
diff --git a/assets/js/components/Site.vue b/assets/js/components/Site.vue
index ea9e03d2ed..3c250f6a51 100644
--- a/assets/js/components/Site.vue
+++ b/assets/js/components/Site.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="d-flex flex-column site safe-area-inset">
 		<div class="container px-4 top-area">
-			<div class="d-flex justify-content-between align-items-center my-3">
+			<div class="d-flex justify-content-between align-items-center mb-2">
 				<h1 class="d-block my-0">
 					{{ siteTitle || "evcc" }}
 				</h1>