Fix theme background of view (#16083)

src/panels/lovelace/hui-root.ts

@@ -26,13 +26,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import {
+import { customElement, property, query, state } from "lit/decorators";
-  customElement,
-  eventOptions,
-  property,
-  query,
-  state,
-} from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
@@ -93,7 +87,7 @@ class HUIRoot extends LitElement {
 
   @state() private _curView?: number | "hass-unused-entities";
 
-  @query("#view", true) _view!: HTMLDivElement;
+  @query("#view", true) _viewRoot!: HTMLDivElement;
 
   private _viewCache?: { [viewId: string]: HUIView };
 
@@ -550,19 +544,14 @@ class HUIRoot extends LitElement {
               `
             : ""}
         </div>
-        <div
+        <div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
-          id="view"
-          @ll-rebuild=${this._debouncedConfigChanged}
-          @scroll=${this._viewScrolled}
-        ></div>
       </div>
     `;
   }
 
-  @eventOptions({ passive: true })
+  private _viewScrolled = (ev) => {
-  private _viewScrolled(ev) {
     this.toggleAttribute("scrolled", ev.currentTarget.scrollTop !== 0);
-  }
+  };
 
   private _isVisible = (view: LovelaceViewConfig) =>
     Boolean(
@@ -684,10 +673,6 @@ class HUIRoot extends LitElement {
     return this.lovelace!.editMode;
   }
 
-  private get _viewRoot(): HTMLDivElement {
-    return this.shadowRoot!.getElementById("view") as HTMLDivElement;
-  }
-
   private get _showButtonMenu(): boolean {
     return (
       (this.narrow && this._conversation(this.hass.config.components)) ||
@@ -874,7 +859,6 @@ class HUIRoot extends LitElement {
       const path = this.config.views[viewIndex].path || viewIndex;
       this._navigateToView(path);
     }
-    this._view.scrollTo(0, 0);
   }
 
   private _selectView(viewIndex: HUIRoot["_curView"], force: boolean): void {
@@ -894,6 +878,7 @@ class HUIRoot extends LitElement {
     const root = this._viewRoot;
 
     if (root.lastChild) {
+      root.lastChild.removeEventListener("scroll", this._viewScrolled);
       root.removeChild(root.lastChild);
     }
 
@@ -928,6 +913,7 @@ class HUIRoot extends LitElement {
     view.lovelace = this.lovelace;
     view.hass = this.hass;
     view.narrow = this.narrow;
+    view.addEventListener("scroll", this._viewScrolled, { passive: true });
 
     const configBackground = viewConfig.background || this.config.background;
 
@@ -936,6 +922,7 @@ class HUIRoot extends LitElement {
     } else {
       this.style.removeProperty("--lovelace-background");
     }
+    this.removeAttribute("scrolled");
 
     root.appendChild(view);
     // Recalculate to see if we need to adjust content area for tab bar
@@ -1046,18 +1033,20 @@ class HUIRoot extends LitElement {
         mwc-button.warning:not([disabled]) {
           color: var(--error-color);
         }
-        #view {
+        hui-view {
           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)
           );
+          padding-left: env(safe-area-inset-left);
+          padding-right: env(safe-area-inset-right);
+          width: 100%;
+          padding-bottom: env(safe-area-inset-bottom);
+          display: block;
           overflow: auto;
           transform: translateZ(0);
-          display: flex;
         }
         /**
          * In edit mode we have the tab bar on a new line *
@@ -1070,21 +1059,6 @@ class HUIRoot extends LitElement {
             var(--header-height) + 48px + env(safe-area-inset-top)
           );
         }
-        #view > * {
-          /**
-          * The view could get larger than the window in Firefox
-          * to prevent that we set the max-width to 100%
-          * flex-grow: 1 and flex-basis: 100% should make sure the view
-          * stays full width.
-          *
-          * https://github.com/home-assistant/home-assistant-polymer/pull/3806
-          */
-          flex: 1 1 100%;
-          height: 100%;
-          max-width: 100%;
-          padding-bottom: env(safe-area-inset-bottom);
-          display: block;
-        }
         .hide-tab {
           display: none;
         }

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

@@ -161,9 +161,8 @@ export class HUIView extends ReactiveElement {
           | undefined;
 
         if (
-          !oldHass ||
+          changedProperties.has("hass") &&
-          this.hass.themes !== oldHass.themes ||
+          (!oldHass || this.hass.themes !== oldHass.themes)
-          this.hass.selectedTheme !== oldHass.selectedTheme
         ) {
           applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
         }