Fix dialog headers (#19152)

* Fix dialog headers

* increase padding

src/components/ha-dialog.ts

@@ -13,13 +13,15 @@ export const createCloseHeading = (
   hass: HomeAssistant | undefined,
   title: string | TemplateResult
 ) => html`
-  <div class="header_title">${title}</div>
+  <div class="header_title">
+    <span>${title}</span>
     <ha-icon-button
       .label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
       .path=${mdiClose}
       dialogAction="close"
       class="header_button"
     ></ha-icon-button>
+  </div>
 `;
 
 @customElement("ha-dialog")
@@ -94,15 +96,12 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__title {
         padding: 24px 24px 0 24px;
-        text-overflow: ellipsis;
-        overflow: hidden;
       }
       .mdc-dialog__actions {
         padding: 12px 24px 12px 24px;
       }
       .mdc-dialog__title::before {
-        display: block;
+        content: unset;
-        height: 0px;
       }
       .mdc-dialog .mdc-dialog__content {
         position: var(--dialog-content-position, relative);
@@ -126,19 +125,26 @@ export class HaDialog extends DialogBase {
         flex-direction: column;
       }
       .header_title {
-        margin-right: 32px;
+        position: relative;
-        margin-inline-end: 32px;
+        padding-right: 40px;
-        margin-inline-start: initial;
+        padding-inline-end: 40px;
+        padding-inline-start: initial;
         direction: var(--direction);
       }
+      .header_title span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+      }
       .header_button {
         position: absolute;
-        right: 16px;
+        right: -8px;
-        top: 14px;
+        top: -8px;
         text-decoration: none;
         color: inherit;
         inset-inline-start: initial;
-        inset-inline-end: 16px;
+        inset-inline-end: -8px;
         direction: var(--direction);
       }
       .dialog-actions {

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -1,8 +1,8 @@
 import "@material/mwc-button";
-import { mdiCalendarClock, mdiClose } from "@mdi/js";
+import { mdiCalendarClock } from "@mdi/js";
 import { toDate } from "date-fns-tz";
 import { addDays, isSameDay } from "date-fns/esm";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { formatDate } from "../../common/datetime/format_date";
 import { formatDateTime } from "../../common/datetime/format_date_time";
@@ -11,6 +11,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { isDate } from "../../common/string/is_date";
 import "../../components/entity/state-info";
 import "../../components/ha-date-input";
+import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-time-input";
 import {
   CalendarEventMutableParams,
@@ -65,15 +66,7 @@ class DialogCalendarEventDetail extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${html`
+        .heading=${createCloseHeading(this.hass, this._data!.summary)}
-          <div class="header_title">${this._data!.summary}</div>
-          <ha-icon-button
-            .label=${this.hass.localize("ui.dialogs.generic.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-            class="header_button"
-          ></ha-icon-button>
-        `}
       >
         <div class="content">
           ${this._error

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import { mdiClose } from "@mdi/js";
 import { formatInTimeZone, toDate } from "date-fns-tz";
 import {
   addDays,
@@ -9,7 +8,7 @@ import {
   startOfHour,
 } from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -18,23 +17,24 @@ import { supportsFeature } from "../../common/entity/supports-feature";
 import { isDate } from "../../common/string/is_date";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-date-input";
+import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import "../../components/ha-time-input";
 import {
   CalendarEntityFeature,
   CalendarEventMutableParams,
+  RecurrenceRange,
   createCalendarEvent,
   deleteCalendarEvent,
-  RecurrenceRange,
   updateCalendarEvent,
 } from "../../data/calendar";
+import { TimeZone } from "../../data/translation";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "../lovelace/components/hui-generic-entity-row";
 import "./ha-recurrence-rule-editor";
 import { showConfirmEventDialog } from "./show-confirm-event-dialog-box";
 import { CalendarEventEditDialogParams } from "./show-dialog-calendar-event-editor";
-import { TimeZone } from "../../data/translation";
 
 const CALENDAR_DOMAINS = ["calendar"];
 
@@ -142,19 +142,12 @@ class DialogCalendarEventEditor extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${html`
+        .heading=${createCloseHeading(
-          <div class="header_title">
+          this.hass,
-            ${isCreate
+          isCreate
             ? this.hass.localize("ui.components.calendar.event.add")
-              : this._summary}
+            : this._summary
-          </div>
+        )}
-          <ha-icon-button
-            .label=${this.hass.localize("ui.dialogs.generic.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-            class="header_button"
-          ></ha-icon-button>
-        `}
       >
         <div class="content">
           ${this._error

src/panels/todo/dialog-todo-item-editor.ts

@@ -1,11 +1,12 @@
 import "@material/mwc-button";
-import { mdiClose } from "@mdi/js";
 import { formatInTimeZone, toDate } from "date-fns-tz";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
+import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-date-input";
+import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-textarea";
 import "../../components/ha-time-input";
 import {
@@ -20,7 +21,6 @@ import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { TodoItemEditDialogParams } from "./show-dialog-todo-item-editor";
-import { supportsFeature } from "../../common/entity/supports-feature";
 
 @customElement("dialog-todo-item-editor")
 class DialogTodoItemEditor extends LitElement {
@@ -100,19 +100,12 @@ class DialogTodoItemEditor extends LitElement {
         @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        .heading=${html`
+        .heading=${createCloseHeading(
-          <div class="header_title">
+          this.hass,
-            ${isCreate
+          isCreate
             ? this.hass.localize("ui.components.todo.item.add")
-              : this._summary}
+            : this._summary
-          </div>
+        )}
-          <ha-icon-button
-            .label=${this.hass.localize("ui.dialogs.generic.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-            class="header_button"
-          ></ha-icon-button>
-        `}
       >
         <div class="content">
           ${this._error