Fix safe area

src/panels/lovelace/hui-root.ts

@@ -1070,7 +1070,7 @@ class HUIRoot extends LitElement {
             var(--header-height) + 48px + env(safe-area-inset-top)
           );
         }
-        #view > * {
+        hui-view {
           /**
           * The view could get larger than the window in Firefox
           * to prevent that we set the max-width to 100%
@@ -1082,7 +1082,6 @@ class HUIRoot extends LitElement {
           flex: 1 1 100%;
           height: 100%;
           max-width: 100%;
-          padding-bottom: env(safe-area-inset-bottom);
           display: block;
         }
         .hide-tab {

src/panels/lovelace/views/hui-masonry-view.ts

@@ -298,8 +298,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         padding-top: 4px;
-        height: 100%;
+        padding-bottom: env(safe-area-inset-bottom);
-        box-sizing: border-box;
       }
 
       .badges {

src/panels/lovelace/views/hui-sidebar-view.ts

@@ -196,8 +196,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         padding-top: 4px;
-        height: 100%;
+        padding-bottom: env(safe-area-inset-bottom);
-        box-sizing: border-box;
       }
 
       .container {

src/panels/lovelace/views/hui-view.ts

@@ -104,6 +104,41 @@ export class HUIView extends ReactiveElement {
     return this;
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    this._applyBackgroundTheme();
+  }
+
+  private _applyBackgroundTheme() {
+    if (this._viewConfigTheme) {
+      const theme = this.hass.themes?.themes[this._viewConfigTheme];
+      if (!theme) {
+        this.parentElement?.style.removeProperty("--lovelace-background");
+        this.parentElement?.style.removeProperty("--primary-background-color");
+        return;
+      }
+      if (theme["lovelace-background"]) {
+        this.parentElement?.style.setProperty(
+          "--lovelace-background",
+          theme["lovelace-background"]
+        );
+      } else {
+        this.parentElement?.style.removeProperty("--lovelace-background");
+      }
+      if (theme["primary-background-color"]) {
+        this.parentElement?.style.setProperty(
+          "--primary-background-color",
+          theme["primary-background-color"]
+        );
+      } else {
+        this.parentElement?.style.removeProperty("--primary-background-color");
+      }
+    } else {
+      this.parentElement?.style.removeProperty("--lovelace-background");
+      this.parentElement?.style.removeProperty("--primary-background-color");
+    }
+  }
+
   public willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
 
@@ -166,6 +201,7 @@ export class HUIView extends ReactiveElement {
           this.hass.selectedTheme !== oldHass.selectedTheme
         ) {
           applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
+          this._applyBackgroundTheme();
         }
       }
       if (changedProperties.has("narrow")) {
@@ -225,6 +261,8 @@ export class HUIView extends ReactiveElement {
     applyThemesOnElement(this, this.hass.themes, viewConfig.theme);
     this._viewConfigTheme = viewConfig.theme;
 
+    this._applyBackgroundTheme();
+
     if (addLayoutElement) {
       while (this.lastChild) {
         this.removeChild(this.lastChild);