From 7e59b889b09e792b2bcc8c769e084a2fad23f6af Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Tue, 5 Mar 2024 09:19:40 +0100
Subject: [PATCH] Layout: no vertical scrolling (#12675)

---
 assets/css/app.css            | 18 ++++++++++++++++--
 assets/js/components/Site.vue |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

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>