add safe area inset padding to view and footer

Nerwyn · Aug 14, 2024 · 832fc99 · 832fc99
1 parent d659bed
commit 832fc99
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/common/root.css b/src/common/root.css
@@ -7,7 +7,7 @@ ha-tabs {
 	background: var(--navbar-background) !important;
 	height: var(--footer-height) !important;
 	width: calc(100% - var(--mdc-drawer-width, 0px));
-	padding: 0 !important;
+	padding-bottom: env(safe-area-inset-bottom) !important;
 	margin: 0 !important;
 	margin-inline: 0 !important;
 }

diff --git a/src/common/view.css b/src/common/view.css
@@ -1,5 +1,10 @@
 /* Add padding to sides of viewbox and force background color just in case */
 #view {
-	padding: 40px 12px var(--footer-height) !important;
+	padding-top: calc(40px + env(safe-area-inset-top)) !important;
+	padding-left: calc(12px + env(safe-area-inset-left)) !important;
+	padding-right: calc(12px + env(safe-area-inset-right)) !important;
+	padding-bottom: calc(
+		var(--footer-height) + env(safe-area-inset-bottom)
+	) !important;
 	background: var(--lovelace-background) !important;
 }