diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts
index d26dcf79f4..acd80dbc3b 100644
--- a/src/components/ha-drawer.ts
+++ b/src/components/ha-drawer.ts
@@ -29,6 +29,9 @@ export class HaDrawer extends DrawerBase {
       .mdc-drawer {
         top: 0;
       }
+      .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
+        z-index: 200;
+      }
     `,
   ];
 }
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 3428ce4a9e..3f42fa57cc 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -963,6 +963,7 @@ class HUIRoot extends LitElement {
           width: var(--mdc-top-app-bar-width, 100%);
           z-index: 2;
           transition: box-shadow 0.3s ease-out;
+          padding-top: env(safe-area-inset-top);
         }
         :host([scrolled]) .header {
           box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
@@ -1044,16 +1045,14 @@ class HUIRoot extends LitElement {
           color: var(--error-color);
         }
         #view {
-          margin-top: var(--header-height);
-          height: calc(
-            100vh - var(--header-height) - env(safe-area-inset-top) -
-              env(safe-area-inset-bottom)
-          );
+          margin-top: calc(var(--header-height) + env(safe-area-inset-top));
+          height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
+          padding-left: env(safe-area-inset-left);
+          padding-right: env(safe-area-inset-right);
           background: var(
             --lovelace-background,
             var(--primary-background-color)
           );
-          display: flex;
           overflow: auto;
         }
         /**
@@ -1061,10 +1060,11 @@ class HUIRoot extends LitElement {
          */
         .edit-mode #view {
           height: calc(
-            100vh - var(--header-height) - 48px - env(safe-area-inset-top) -
-              env(safe-area-inset-bottom)
+            100vh - var(--header-height) - 48px - env(safe-area-inset-top)
+          );
+          margin-top: calc(
+            var(--header-height) + 48px + env(safe-area-inset-top)
           );
-          margin-top: calc(var(--header-height) + 48px);
         }
         #view > * {
           /**
@@ -1077,6 +1077,8 @@ class HUIRoot extends LitElement {
           */
           flex: 1 1 100%;
           max-width: 100%;
+          padding-bottom: env(safe-area-inset-bottom);
+          display: block;
         }
         .hide-tab {
           display: none;