diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 5571bd0316..f110904b91 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/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 { diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 687d254af8..b307f21238 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/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%; - box-sizing: border-box; + padding-bottom: env(safe-area-inset-bottom); } .badges { diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index 38f3d871ff..ca22f3104c 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/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%; - box-sizing: border-box; + padding-bottom: env(safe-area-inset-bottom); } .container { diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 013e3b3e54..34acc15cf8 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -111,7 +111,12 @@ export class HUIView extends ReactiveElement { private _applyBackgroundTheme() { if (this._viewConfigTheme) { - const theme = this.hass.themes.themes[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",