Fix lovelace background, tweak headers (#15977)

src/components/ha-dialog.ts

@@ -41,7 +41,9 @@ export class HaDialog extends DialogBase {
       SUPPRESS_DEFAULT_PRESS_SELECTOR,
     ].join(", ");
     this._updateScrolledAttribute();
-    this.contentElement?.addEventListener("scroll", this._onScroll);
+    this.contentElement?.addEventListener("scroll", this._onScroll, {
+      passive: true,
+    });
   }
 
   disconnectedCallback(): void {

src/layouts/hass-tabs-subpage-data-table.ts

@@ -323,7 +323,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         --text-field-overflow: initial;
         display: flex;
         justify-content: flex-end;
-        margin-right: 8px;
+        margin-right: -8px;
         color: var(--primary-text-color);
       }
       .active-filters {

src/panels/config/integrations/ha-config-integrations.ts

@@ -376,7 +376,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     );
 
     const filterMenu = html`
-      <div slot=${ifDefined(this.narrow ? "toolbar-icon" : "suffix")}>
+      <div slot=${ifDefined(this.narrow ? "toolbar-icon" : undefined)}>
         <div class="menu-badge-container">
           ${!this._showDisabled && this.narrow && disabledCount
             ? html`<span class="badge">${disabledCount}</span>`
@@ -455,24 +455,25 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                   )}
                 >
                   ${!this._showDisabled && disabledCount
-                    ? html`<div
+                    ? html`<div class="filters" slot="suffix">
-                        class="active-filters"
+                        <div
-                        slot="suffix"
+                          class="active-filters"
-                        @click=${this._preventDefault}
+                          @click=${this._preventDefault}
-                      >
+                        >
-                        ${this.hass.localize(
+                          ${this.hass.localize(
-                          "ui.panel.config.integrations.disable.disabled_integrations",
+                            "ui.panel.config.integrations.disable.disabled_integrations",
-                          { number: disabledCount }
+                            { number: disabledCount }
-                        )}
-                        <mwc-button
-                          @click=${this._toggleShowDisabled}
-                          .label=${this.hass.localize(
-                            "ui.panel.config.integrations.disable.show"
                           )}
-                        ></mwc-button>
+                          <mwc-button
+                            @click=${this._toggleShowDisabled}
+                            .label=${this.hass.localize(
+                              "ui.panel.config.integrations.disable.show"
+                            )}
+                          ></mwc-button>
+                        </div>
+                        ${filterMenu}
                       </div>`
                     : ""}
-                  ${filterMenu}
                 </search-input>
               </div>
             `}
@@ -845,7 +846,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         .container > * {
           max-width: 500px;
         }
-
         .empty-message {
           margin: auto;
           text-align: center;
@@ -884,6 +884,16 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           right: 0;
           left: 0;
         }
+        .filters {
+          --mdc-text-field-fill-color: var(--input-fill-color);
+          --mdc-text-field-idle-line-color: var(--input-idle-line-color);
+          --mdc-shape-small: 4px;
+          --text-field-overflow: initial;
+          display: flex;
+          justify-content: flex-end;
+          margin-right: -8px;
+          color: var(--primary-text-color);
+        }
         .active-filters {
           color: var(--primary-text-color);
           position: relative;

src/panels/lovelace/hui-root.ts

@@ -26,7 +26,13 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  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";
@@ -116,9 +122,9 @@ class HUIRoot extends LitElement {
 
     return html`
       <div
-        class=" ${classMap({
+        class=${classMap({
           "edit-mode": this._editMode,
-        })}"
+        })}
       >
         <div class="header">
           <div class="toolbar">
@@ -547,11 +553,20 @@ class HUIRoot extends LitElement {
               `
             : ""}
         </div>
-        <div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
+        <div
+          id="view"
+          @ll-rebuild=${this._debouncedConfigChanged}
+          @scroll=${this._viewScrolled}
+        ></div>
       </div>
     `;
   }
 
+  @eventOptions({ passive: true })
+  private _viewScrolled(ev) {
+    this.toggleAttribute("scrolled", ev.currentTarget.scrollTop !== 0);
+  }
+
   private _isVisible = (view: LovelaceViewConfig) =>
     Boolean(
       this._editMode ||
@@ -947,6 +962,10 @@ class HUIRoot extends LitElement {
           top: 0;
           width: var(--mdc-top-app-bar-width, 100%);
           z-index: 2;
+          transition: box-shadow 0.3s ease-out;
+        }
+        :host([scrolled]) .header {
+          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
         }
         .edit-mode .header {
           background-color: var(--app-header-edit-background-color, #455a64);
@@ -1025,14 +1044,10 @@ class HUIRoot extends LitElement {
             100vh - var(--header-height) - env(safe-area-inset-top) -
               env(safe-area-inset-bottom)
           );
-          /**
+          background: var(
-          * Since we only set min-height, if child nodes need percentage
+            --lovelace-background,
-          * heights they must use absolute positioning so we need relative
+            var(--primary-background-color)
-          * positioning here.
+          );
-          *
-          * https://www.w3.org/TR/CSS2/visudet.html#the-height-property
-          */
-          position: relative;
           display: flex;
           overflow: auto;
         }
@@ -1064,12 +1079,6 @@ class HUIRoot extends LitElement {
         .menu-link {
           text-decoration: none;
         }
-        hui-view {
-          background: var(
-            --lovelace-background,
-            var(--primary-background-color)
-          );
-        }
         .exit-edit-mode {
           --mdc-theme-primary: var(--app-header-edit-text-color, #fff);
           --mdc-button-outline-color: var(--app-header-edit-text-color, #fff);