Make dialogs full width on mobile, and modal (#4642)

* Make dialogs full width on mobile, and modal

* Fix dialog to bottom screen mobile

src/components/ha-dialog.ts

@@ -16,6 +16,9 @@ export class HaDialog extends MwcDialog {
         .mdc-dialog__actions {
           justify-content: var(--justify-action-buttons, flex-end);
         }
+        .mdc-dialog__container {
+          align-items: var(--vertial-align-dialog, center);
+        }
       `,
     ];
   }

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

@@ -55,13 +55,26 @@ class DialogPersonDetail extends LitElement {
       return html``;
     }
     const nameInvalid = this._name.trim() === "";
+    const title = html`
+      ${this._params.entry
+        ? this._params.entry.name
+        : this.hass!.localize("ui.panel.config.person.detail.new_person")}
+      <paper-icon-button
+        aria-label=${this.hass.localize(
+          "ui.panel.config.integrations.config_flow.dismiss"
+        )}
+        icon="hass:close"
+        dialogAction="close"
+        style="position: absolute; right: 16px; top: 12px;"
+      ></paper-icon-button>
+    `;
     return html`
       <ha-dialog
         open
         @closing="${this._close}"
-        .title=${this._params.entry
+        scrimClickAction=""
-          ? this._params.entry.name
+        escapeKeyAction=""
-          : this.hass!.localize("ui.panel.config.person.detail.new_person")}
+        .title=${title}
       >
         <div>
           ${this._error
@@ -225,11 +238,20 @@ class DialogPersonDetail extends LitElement {
     return [
       css`
         ha-dialog {
-          min-width: 400px;
+          --mdc-dialog-min-width: 400px;
-          max-width: 600px;
+          --mdc-dialog-max-width: 600px;
           --mdc-dialog-title-ink-color: var(--primary-text-color);
           --justify-action-buttons: space-between;
         }
+        /* make dialog fullscreen on small screens */
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-height: 100vh;
+            --mdc-dialog-shape-radius: 0px;
+            --vertial-align-dialog: flex-end;
+          }
+        }
         .form {
           padding-bottom: 24px;
         }

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

@@ -62,13 +62,26 @@ class DialogZoneDetail extends LitElement {
     if (!this._params) {
       return html``;
     }
+    const title = html`
+      ${this._params.entry
+        ? this._params.entry.name
+        : this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
+      <paper-icon-button
+        aria-label=${this.hass.localize(
+          "ui.panel.config.integrations.config_flow.dismiss"
+        )}
+        icon="hass:close"
+        dialogAction="close"
+        style="position: absolute; right: 16px; top: 12px;"
+      ></paper-icon-button>
+    `;
     return html`
       <ha-dialog
         open
         @closing="${this._close}"
-        .title=${this._params.entry
+        scrimClickAction=""
-          ? this._params.entry.name
+        escapeKeyAction=""
-          : this.hass!.localize("ui.panel.config.zone.detail.new_zone")}
+        .title=${title}
       >
         <div>
           ${this._error
@@ -252,6 +265,16 @@ class DialogZoneDetail extends LitElement {
             --mdc-dialog-min-width: 600px;
           }
         }
+
+        /* make dialog fullscreen on small screens */
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-height: 100vh;
+            --mdc-dialog-shape-radius: 0px;
+            --vertial-align-dialog: flex-end;
+          }
+        }
         .form {
           padding-bottom: 24px;
         }