Layout: no vertical scrolling (#12675)

evcc-io · Mar 5, 2024 · 7e59b88 · 7e59b88
1 parent 0d541fc
commit 7e59b88
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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>