Migrate more info dialog to ha-wa-dialog and add scale view transition

src/components/chart/state-history-chart-line.ts

@@ -305,7 +305,10 @@ export class StateHistoryChartLine extends LitElement {
         visualMap: this._visualMap,
         tooltip: {
           trigger: "axis",
-          appendTo: document.body,
+          renderMode: "html",
+          position: "bottom",
+          align: "center",
+          confine: true,
           formatter: this._renderTooltip,
         },
       };

src/components/chart/state-history-chart-timeline.ts

@@ -255,7 +255,10 @@ export class StateHistoryChartTimeline extends LitElement {
         right: rtl ? labelWidth : 1,
       },
       tooltip: {
-        appendTo: document.body,
+        renderMode: "html",
+        position: "bottom",
+        align: "center",
+        confine: true,
         formatter: this._renderTooltip,
       },
     };

src/components/chart/statistics-chart.ts

@@ -335,7 +335,10 @@ export class StatisticsChart extends LitElement {
       },
       tooltip: {
         trigger: "axis",
-        appendTo: document.body,
+        renderMode: "html",
+        position: "bottom",
+        align: "center",
+        confine: true,
         formatter: this._renderTooltip,
       },
     };

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -35,8 +35,9 @@ import {
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
 import { computeRTL } from "../../common/util/compute_rtl";
+import { withViewTransition } from "../../common/util/view-transition";
 import "../../components/ha-button-menu";
-import "../../components/ha-dialog";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-dialog-header";
 import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
@@ -107,6 +108,8 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
+  @state() private _open = false;
+
   @state() private _parentEntityIds: string[] = [];
 
   @query(".content") private _contentElement?: HTMLDivElement;
@@ -147,6 +150,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._initialView = params.view || DEFAULT_VIEW;
     this._childView = undefined;
     this.large = false;
+    this._open = true;
     this._loadEntityRegistryEntry();
   }
 
@@ -165,6 +169,10 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._entityId = undefined;
     this._parentEntityIds = [];
     this._entry = undefined;
@@ -391,21 +399,21 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     const isRTL = computeRTL(this.hass);
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        .width=${this.large ? "full" : "medium"}
+        @closed=${this._dialogClosed}
         @opened=${this._handleOpened}
-        .escapeKeyAction=${this._isEscapeEnabled ? undefined : ""}
-        .heading=${title}
-        hideActions
-        flexContent
+        ?prevent-scrim-close=${!this._isEscapeEnabled}
+        flexcontent
       >
-        <ha-dialog-header slot="heading">
+        <ha-dialog-header slot="header">
           ${showCloseIcon
             ? html`
                 <ha-icon-button
                   slot="navigationIcon"
-                  dialogAction="cancel"
+                  data-dialog="close"
                   .label=${this.hass.localize("ui.common.close")}
                   .path=${mdiClose}
                 ></ha-icon-button>
@@ -464,7 +472,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                         menu-corner="END"
                         slot="actionItems"
                         @closed=${stopPropagation}
-                        fixed
                       >
                         <ha-icon-button
                           slot="trigger"
@@ -586,7 +593,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                     menu-corner="END"
                     slot="actionItems"
                     @closed=${stopPropagation}
-                    fixed
                   >
                     <ha-icon-button
                       slot="trigger"
@@ -640,7 +646,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
                     : this._currView === "info"
                       ? html`
                           <ha-more-info-info
-                            dialogInitialFocus
                             .hass=${this.hass}
                             .entityId=${this._entityId}
                             .entry=${this._entry}
@@ -688,7 +693,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
           )}
           ${this.renderScrollableFades()}
         </div>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -711,7 +716,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
   }
 
   private _enlarge() {
-    this.large = !this.large;
+    withViewTransition(() => {
+      this.large = !this.large;
+    });
   }
 
   private _handleOpened() {
@@ -747,7 +754,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
       haStyleDialogFixedTop,
       haStyleScrollbar,
       css`
-        ha-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
 
@@ -784,23 +791,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
           display: block;
         }
 
-        @media all and (min-width: 600px) and (min-height: 501px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 580px;
-            --mdc-dialog-max-width: 580px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-
-          .main-title {
-            cursor: default;
-          }
-
-          :host([large]) ha-dialog {
-            --mdc-dialog-min-width: 90vw;
-            --mdc-dialog-max-width: 90vw;
-          }
-        }
-
         .title {
           display: flex;
           flex-direction: column;

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -417,7 +417,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               "ui.dialogs.entity_registry.editor.device_class"
             )}
             naturalMenuWidth
-            fixedMenuPosition
             @selected=${this._switchAsDomainChanged}
             @closed=${stopPropagation}
           >
@@ -454,7 +453,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
                 )}
                 .value=${this._switchAsDomain}
                 naturalMenuWidth
-                fixedMenuPosition
                 @selected=${this._switchAsDomainChanged}
                 @closed=${stopPropagation}
               >
@@ -507,7 +505,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${this._deviceClass}
               naturalMenuWidth
-              fixedMenuPosition
               clearable
               @selected=${this._deviceClassChanged}
               @closed=${stopPropagation}
@@ -554,7 +551,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${stateObj.attributes.unit_of_measurement}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._unitChanged}
               @closed=${stopPropagation}
             >
@@ -609,7 +605,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${stateObj.attributes.unit_of_measurement}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._unitChanged}
               @closed=${stopPropagation}
             >
@@ -637,7 +632,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
                 ? "default"
                 : this._precision.toString()}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._precisionChanged}
               @closed=${stopPropagation}
             >
@@ -670,7 +664,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${this._precipitation_unit}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._precipitationUnitChanged}
               @closed=${stopPropagation}
             >
@@ -686,7 +679,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${this._pressure_unit}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._pressureUnitChanged}
               @closed=${stopPropagation}
             >
@@ -702,7 +694,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${this._temperature_unit}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._temperatureUnitChanged}
               @closed=${stopPropagation}
             >
@@ -718,7 +709,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${this._visibility_unit}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._visibilityUnitChanged}
               @closed=${stopPropagation}
             >
@@ -734,7 +724,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               )}
               .value=${this._wind_speed_unit}
               naturalMenuWidth
-              fixedMenuPosition
               @selected=${this._windSpeedUnitChanged}
               @closed=${stopPropagation}
             >
@@ -823,7 +812,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
                   "ui.dialogs.entity_registry.editor.stream.stream_orientation"
                 )}
                 naturalMenuWidth
-                fixedMenuPosition
                 .disabled=${this.disabled}
                 @selected=${this._handleCameraOrientationChanged}
                 @closed=${stopPropagation}