Use scrollbar styles on host

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -1,10 +1,9 @@
 import type { CSSResultGroup } from "lit";
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-dialog-footer";
-import "../../../components/ha-wa-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-button";
 import type { HomeZoneMutableParams } from "../../../data/zone";
@@ -30,8 +29,6 @@ class DialogHomeZoneDetail extends LitElement {
 
   @state() private _params?: HomeZoneDetailDialogParams;
 
-  @state() private _open = false;
-
   @state() private _submitting = false;
 
   public showDialog(params: HomeZoneDetailDialogParams): void {
@@ -43,14 +40,9 @@ class DialogHomeZoneDetail extends LitElement {
       longitude: this.hass.config.longitude,
       radius: this.hass.config.radius,
     };
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
     this._data = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -66,40 +58,41 @@ class DialogHomeZoneDetail extends LitElement {
     const valid = !latInvalid && !lngInvalid;
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this.hass!.localize("ui.common.edit_item", {
-          name: this._data.name,
-        })}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass!.localize("ui.common.edit_item", { name: this._data.name })
+        )}
       >
-        <ha-form
-          autofocus
-          .hass=${this.hass}
-          .schema=${SCHEMA}
-          .data=${this._formData(this._data)}
-          .error=${this._error}
-          .computeLabel=${this._computeLabel}
-          @value-changed=${this._valueChanged}
-        ></ha-form>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass!.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            slot="primaryAction"
-            @click=${this._updateEntry}
-            .disabled=${!valid || this._submitting}
-          >
-            ${this.hass!.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <div>
+          <ha-form
+            .hass=${this.hass}
+            .schema=${SCHEMA}
+            .data=${this._formData(this._data)}
+            .error=${this._error}
+            .computeLabel=${this._computeLabel}
+            @value-changed=${this._valueChanged}
+          ></ha-form>
+        </div>
+        <ha-button
+          slot="primaryAction"
+          appearance="plain"
+          @click=${this.closeDialog}
+        >
+          ${this.hass!.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updateEntry}
+          .disabled=${!valid || this._submitting}
+        >
+          ${this.hass!.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -137,7 +130,20 @@ class DialogHomeZoneDetail extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyleDialog];
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --mdc-dialog-min-width: min(600px, 95vw);
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
+          }
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/zone/dialog-zone-detail.ts

@@ -4,8 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
-import "../../../components/ha-dialog-footer";
-import "../../../components/ha-wa-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-form/ha-form";
 import "../../../components/ha-button";
 import type { SchemaUnion } from "../../../components/ha-form/types";
@@ -25,8 +24,6 @@ class DialogZoneDetail extends LitElement {
 
   @state() private _params?: ZoneDetailDialogParams;
 
-  @state() private _open = false;
-
   @state() private _submitting = false;
 
   public showDialog(params: ZoneDetailDialogParams): void {
@@ -53,14 +50,9 @@ class DialogZoneDetail extends LitElement {
         radius: 100,
       };
     }
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
     this._data = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
@@ -86,58 +78,61 @@ class DialogZoneDetail extends LitElement {
       !radiusInvalid;
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._params.entry
-          ? this.hass!.localize("ui.common.edit_item", {
-              name: this._params.entry.name,
-            })
-          : this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this._params.entry
+            ? this.hass!.localize("ui.common.edit_item", {
+                name: this._params.entry.name,
+              })
+            : this.hass!.localize("ui.panel.config.zone.detail.new_zone")
+        )}
       >
-        <ha-form
-          autofocus
-          .hass=${this.hass}
-          .schema=${this._schema(this._data.icon)}
-          .data=${this._formData(this._data)}
-          .error=${this._error}
-          .computeLabel=${this._computeLabel}
-          class=${this._data.passive ? "passive" : ""}
-          @value-changed=${this._valueChanged}
-        ></ha-form>
-        <ha-dialog-footer slot="footer">
+        <div>
+          <ha-form
+            .hass=${this.hass}
+            .schema=${this._schema(this._data.icon)}
+            .data=${this._formData(this._data)}
+            .error=${this._error}
+            .computeLabel=${this._computeLabel}
+            class=${this._data.passive ? "passive" : ""}
+            @value-changed=${this._valueChanged}
+          ></ha-form>
+        </div>
+        ${this._params.entry
+          ? html`
+              <ha-button
+                slot="secondaryAction"
+                variant="danger"
+                appearance="plain"
+                @click=${this._deleteEntry}
+                .disabled=${this._submitting}
+              >
+                ${this.hass!.localize("ui.panel.config.zone.detail.delete")}
+              </ha-button>
+            `
+          : nothing}
+        <ha-button
+          slot="primaryAction"
+          appearance="plain"
+          @click=${this.closeDialog}
+        >
+          ${this.hass!.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updateEntry}
+          .disabled=${!valid || this._submitting}
+        >
           ${this._params.entry
-            ? html`
-                <ha-button
-                  slot="secondaryAction"
-                  variant="danger"
-                  appearance="plain"
-                  @click=${this._deleteEntry}
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass!.localize("ui.panel.config.zone.detail.delete")}
-                </ha-button>
-              `
-            : nothing}
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass!.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            slot="primaryAction"
-            @click=${this._updateEntry}
-            .disabled=${!valid || this._submitting}
-          >
-            ${this._params.entry
-              ? this.hass!.localize("ui.common.save")
-              : this.hass!.localize("ui.panel.config.zone.detail.create")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+            ? this.hass!.localize("ui.common.save")
+            : this.hass!.localize("ui.panel.config.zone.detail.create")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -214,7 +209,7 @@ class DialogZoneDetail extends LitElement {
     this._submitting = true;
     try {
       if (await this._params!.removeEntry!()) {
-        this.closeDialog();
+        this._params = undefined;
       }
     } finally {
       this._submitting = false;
@@ -225,6 +220,15 @@ class DialogZoneDetail extends LitElement {
     return [
       haStyleDialog,
       css`
+        ha-dialog {
+          --mdc-dialog-min-width: min(600px, 95vw);
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
+          }
+        }
         ha-form.passive {
           --zone-radius-color: var(--secondary-text-color);
         }

src/panels/lovelace/hui-root.ts

@@ -635,8 +635,12 @@ class HUIRoot extends LitElement {
     `;
   }
 
-  private _handleWindowScroll = () => {
-    this.toggleAttribute("scrolled", window.scrollY !== 0);
+  private _handleContainerScroll = () => {
+    const viewRoot = this._viewRoot;
+    this.toggleAttribute(
+      "scrolled",
+      viewRoot ? viewRoot.scrollTop !== 0 : false
+    );
   };
 
   private _locationChanged = () => {
@@ -667,7 +671,7 @@ class HUIRoot extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    window.addEventListener("scroll", this._handleWindowScroll, {
+    this._viewRoot?.addEventListener("scroll", this._handleContainerScroll, {
       passive: true,
     });
     this._handleUrlChanged();
@@ -678,7 +682,7 @@ class HUIRoot extends LitElement {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    window.addEventListener("scroll", this._handleWindowScroll, {
+    this._viewRoot?.addEventListener("scroll", this._handleContainerScroll, {
       passive: true,
     });
     window.addEventListener("popstate", this._handlePopState);
@@ -689,10 +693,14 @@ class HUIRoot extends LitElement {
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    window.removeEventListener("scroll", this._handleWindowScroll);
+    this._viewRoot?.removeEventListener("scroll", this._handleContainerScroll);
     window.removeEventListener("popstate", this._handlePopState);
     window.removeEventListener("location-changed", this._locationChanged);
-    this.toggleAttribute("scrolled", window.scrollY !== 0);
+    const viewRoot = this._viewRoot;
+    this.toggleAttribute(
+      "scrolled",
+      viewRoot ? viewRoot.scrollTop !== 0 : false
+    );
     // Re-enable history scroll restoration when leaving the page
     window.history.scrollRestoration = "auto";
   }
@@ -825,9 +833,12 @@ class HUIRoot extends LitElement {
             (this._restoreScroll && this._viewScrollPositions[newSelectView]) ||
             0;
           this._restoreScroll = false;
-          requestAnimationFrame(() =>
-            scrollTo({ behavior: "auto", top: position })
-          );
+          requestAnimationFrame(() => {
+            const viewRoot = this._viewRoot;
+            if (viewRoot) {
+              viewRoot.scrollTo({ behavior: "auto", top: position });
+            }
+          });
         }
         this._selectView(newSelectView, force);
       });
@@ -1152,7 +1163,7 @@ class HUIRoot extends LitElement {
       const path = this.config.views[viewIndex].path || viewIndex;
       this._navigateToView(path);
     } else if (!this._editMode) {
-      scrollTo({ behavior: "smooth", top: 0 });
+      this._viewRoot?.scrollTo({ behavior: "smooth", top: 0 });
     }
   }
 
@@ -1163,7 +1174,8 @@ class HUIRoot extends LitElement {
 
     // Save scroll position of current view
     if (this._curView != null) {
-      this._viewScrollPositions[this._curView] = window.scrollY;
+      const viewRoot = this._viewRoot;
+      this._viewScrollPositions[this._curView] = viewRoot?.scrollTop ?? 0;
     }
 
     viewIndex = viewIndex === undefined ? 0 : viewIndex;
@@ -1469,9 +1481,14 @@ class HUIRoot extends LitElement {
         hui-view-container {
           position: relative;
           display: flex;
-          min-height: 100vh;
+          height: calc(
+            100vh - var(--header-height) - var(--safe-area-inset-top) - var(
+                --view-container-padding-top,
+                0px
+              )
+          );
           box-sizing: border-box;
-          padding-top: calc(
+          margin-top: calc(
             var(--header-height) + var(--safe-area-inset-top) +
               var(--view-container-padding-top, 0px)
           );
@@ -1494,7 +1511,12 @@ class HUIRoot extends LitElement {
          * In edit mode we have the tab bar on a new line *
          */
         hui-view-container.has-tab-bar {
-          padding-top: calc(
+          height: calc(
+            100vh - var(--header-height, 56px) - calc(
+                var(--tab-bar-height, 56px) - 2px
+              ) - var(--safe-area-inset-top, 0px)
+          );
+          margin-top: calc(
             var(--header-height, 56px) +
               calc(var(--tab-bar-height, 56px) - 2px) +
               var(--safe-area-inset-top, 0px)

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

@@ -407,12 +407,20 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
     }
   }
 
+  private _getScrollContainer(): Element | null {
+    // The scroll container is the hui-view-container parent
+    return this.closest("hui-view-container");
+  }
+
   private _toggleView() {
+    const scrollContainer = this._getScrollContainer();
+    const scrollTop = scrollContainer?.scrollTop ?? 0;
+
     // Save current scroll position
     if (this._sidebarTabActive) {
-      this._sidebarScrollTop = window.scrollY;
+      this._sidebarScrollTop = scrollTop;
     } else {
-      this._contentScrollTop = window.scrollY;
+      this._contentScrollTop = scrollTop;
     }
 
     this._sidebarTabActive = !this._sidebarTabActive;
@@ -428,7 +436,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       const scrollY = this._sidebarTabActive
         ? this._sidebarScrollTop
         : this._contentScrollTop;
-      window.scrollTo(0, scrollY);
+      scrollContainer?.scrollTo(0, scrollY);
     });
   }
 

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { listenMediaQuery } from "../../../common/dom/media_query";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import { haStyleScrollbar } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 
 type BackgroundConfig = LovelaceViewConfig["background"];
@@ -22,6 +23,7 @@ class HuiViewContainer extends LitElement {
 
   public connectedCallback(): void {
     super.connectedCallback();
+    this.classList.add("ha-scrollbar");
     this._setUpMediaQuery();
     this._applyTheme();
   }
@@ -74,11 +76,16 @@ class HuiViewContainer extends LitElement {
     }
   }
 
-  static styles = css`
-    :host {
-      display: relative;
-    }
-  `;
+  static styles = [
+    haStyleScrollbar,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+        -webkit-overflow-scrolling: touch;
+      }
+    `,
+  ];
 }
 
 declare global {

src/resources/styles.ts

@@ -224,17 +224,20 @@ export const haStyleDialogFixedTop = css`
 `;
 
 export const haStyleScrollbar = css`
-  .ha-scrollbar::-webkit-scrollbar {
+  .ha-scrollbar::-webkit-scrollbar,
+  :host(.ha-scrollbar)::-webkit-scrollbar {
     width: 0.4rem;
     height: 0.4rem;
   }
 
-  .ha-scrollbar::-webkit-scrollbar-thumb {
+  .ha-scrollbar::-webkit-scrollbar-thumb,
+  :host(.ha-scrollbar)::-webkit-scrollbar-thumb {
     border-radius: var(--ha-border-radius-sm);
     background: var(--scrollbar-thumb-color);
   }
 
-  .ha-scrollbar {
+  .ha-scrollbar,
+  :host(.ha-scrollbar) {
     overflow-y: auto;
     scrollbar-color: var(--scrollbar-thumb-color) transparent;
     scrollbar-width: thin;