Fix header on take control dialog (#20123)

src/components/ha-dialog.ts

@@ -139,12 +139,12 @@ export class HaDialog extends DialogBase {
       }
       .header_button {
         position: absolute;
-        right: -8px;
-        top: -8px;
+        right: -12px;
+        top: -12px;
         text-decoration: none;
         color: inherit;
         inset-inline-start: initial;
-        inset-inline-end: -8px;
+        inset-inline-end: -12px;
         direction: var(--direction);
       }
       .dialog-actions {

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -220,7 +220,6 @@ export class HuiDialogEditCard
             ? html`
                 <a
                   slot="actionItems"
-                  class="header_button"
                   href=${this._documentationURL}
                   title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
                   target="_blank"
@@ -518,7 +517,7 @@ export class HuiDialogEditCard
           align-items: center;
           justify-content: space-between;
         }
-        .header_button {
+        ha-dialog-header a {
           color: inherit;
           text-decoration: none;
         }

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -1,10 +1,11 @@
 import "@material/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
-import { CSSResultGroup, html, LitElement, nothing } from "lit";
+import { mdiClose, mdiHelpCircle } from "@mdi/js";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-dialog";
+import "../../../components/ha-dialog-header";
 import "../../../components/ha-formfield";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-switch";
@@ -49,27 +50,39 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
     if (!this._params) {
       return nothing;
     }
+
+    const heading = this.hass!.localize(
+      "ui.panel.lovelace.editor.save_config.header"
+    );
     return html`
       <ha-dialog
         open
         scrimClickAction
         escapeKeyAction
         @closed=${this._close}
-        .heading=${html`${this.hass!.localize(
-            "ui.panel.lovelace.editor.save_config.header"
-          )}<a
-            class="header_button"
+        .heading=${heading}
+      >
+        <ha-dialog-header slot="heading">
+          <ha-icon-button
+            slot="navigationIcon"
+            dialogAction="cancel"
+            .label=${this.hass!.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">${heading}</span>
+          <a
             href=${documentationUrl(this.hass!, "/lovelace/")}
             title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
             target="_blank"
             rel="noreferrer"
+            slot="actionItems"
           >
             <ha-icon-button
               .path=${mdiHelpCircle}
               .label=${this.hass!.localize("ui.common.help")}
             ></ha-icon-button>
-          </a>`}
-      >
+          </a>
+        </ha-dialog-header>
         <div>
           <p>
             ${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
@@ -183,7 +196,19 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyleDialog];
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: 0 24px 24px 24px;
+        }
+
+        ha-dialog-header a {
+          color: inherit;
+          text-decoration: none;
+        }
+      `,
+    ];
   }
 }