Make edit-dialog look ok on mobile (#2501)

* Make edit-dialog look ok on mobile

* Wide on wide screen

* Remove apply

* Remove variable, as it only used in one place...

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

@@ -52,7 +52,10 @@ class HaMoreInfoDialog extends DialogMixin(PolymerElement) {
             --more-info-header-color: var(--text-primary-color);
           }
           :host {
-            @apply --ha-dialog-fullscreen;
+            width: 100% !important;
+            border-radius: 0px;
+            position: fixed !important;
+            margin: 0;
           }
           :host::before {
             content: "";

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

@@ -1,13 +1,17 @@
 import {
   html,
+  css,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import yaml from "js-yaml";
 
+import { haStyleDialog } from "../../../../resources/ha-style";
+
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-dialog/paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
@@ -77,6 +81,82 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     };
   }
 
+  static get styles(): CSSResult[] {
+    return [
+      haStyleDialog,
+      css`
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          :host::before {
+            content: "";
+            position: fixed;
+            z-index: -1;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            bottom: 0px;
+            background-color: inherit;
+          }
+          /* overrule the ha-style-dialog max-height on small screens */
+          paper-dialog {
+            max-height: 100%;
+            height: 100%;
+          }
+        }
+
+        @media all and (min-width: 660px) {
+          paper-dialog {
+            width: 650px;
+          }
+        }
+
+        paper-dialog {
+          max-width: 650px;
+        }
+
+        .center {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .margin-bot {
+          margin-bottom: 24px;
+        }
+        paper-button paper-spinner {
+          width: 14px;
+          height: 14px;
+          margin-right: 20px;
+        }
+        paper-spinner {
+          display: none;
+        }
+        paper-spinner[active] {
+          display: block;
+        }
+        .hidden {
+          display: none;
+        }
+        .element-editor {
+          margin-bottom: 8px;
+        }
+        .error {
+          color: #ef5350;
+          border-bottom: 1px solid #ef5350;
+        }
+        hr {
+          color: #000;
+          opacity: 0.12;
+        }
+        hui-card-preview {
+          padding-top: 8px;
+          margin-bottom: 4px;
+          display: block;
+        }
+        .toggle-button {
+          margin-right: auto;
+        }
+      `,
+    ];
+  }
+
   private get _dialog(): PaperDialogElement {
     return this.shadowRoot!.querySelector("paper-dialog")!;
   }
@@ -131,7 +211,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     }
 
     return html`
-      ${this.renderStyle()}
       <paper-dialog
         with-backdrop
         opened
@@ -194,56 +273,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     `;
   }
 
-  private renderStyle(): TemplateResult {
-    return html`
-      <style>
-        paper-dialog {
-          width: 650px;
-        }
-        .center {
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .margin-bot {
-          margin-bottom: 24px;
-        }
-        paper-button paper-spinner {
-          width: 14px;
-          height: 14px;
-          margin-right: 20px;
-        }
-        paper-spinner {
-          display: none;
-        }
-        paper-spinner[active] {
-          display: block;
-        }
-        .hidden {
-          display: none;
-        }
-        .element-editor {
-          margin-bottom: 8px;
-        }
-        .error {
-          color: #ef5350;
-          border-bottom: 1px solid #ef5350;
-        }
-        hr {
-          color: #000;
-          opacity: 0.12;
-        }
-        hui-card-preview {
-          padding-top: 8px;
-          margin-bottom: 4px;
-          display: block;
-        }
-        .toggle-button {
-          margin-right: auto;
-        }
-      </style>
-    `;
-  }
-
   private async _loadedDialog(): Promise<void> {
     await this.updateComplete;
     this._loading = false;

src/resources/ha-style.ts

@@ -64,29 +64,6 @@ export const haStyle = css`
 `;
 
 export const haStyleDialog = css`
-  :host {
-    --ha-dialog-narrow: {
-      margin: 0;
-      width: 100% !important;
-      max-height: calc(100% - 64px);
-
-      position: fixed !important;
-      bottom: 0px;
-      left: 0px;
-      right: 0px;
-      overflow: scroll;
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
-    }
-
-    --ha-dialog-fullscreen: {
-      width: 100% !important;
-      border-radius: 0px;
-      position: fixed !important;
-      margin: 0;
-    }
-  }
-
   /* prevent clipping of positioned elements */
   paper-dialog-scrollable {
     --paper-dialog-scrollable: {
@@ -103,7 +80,17 @@ export const haStyleDialog = css`
 
   @media all and (max-width: 450px), all and (max-height: 500px) {
     paper-dialog {
-      @apply (--ha-dialog-narrow);
+      margin: 0;
+      width: 100% !important;
+      max-height: calc(100% - 64px);
+
+      position: fixed !important;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      overflow: scroll;
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
     }
   }
 `;