YAML editor fixes (#2737)

* YAML editor fixes

* Fix auto height in dialog

* remove height from paper-dialog-buttons

* wait for next paint instead of fixed time

* resize again after codemirror is updated

* afternextrender merge

src/panels/lovelace/components/hui-yaml-editor.ts

@@ -32,9 +32,12 @@ export class HuiYamlEditor extends HTMLElement {
             <style>
               ${codeMirrorCSS}
               .CodeMirror {
-                height: var(--code-mirror-height, 300px);
+                height: var(--code-mirror-height, auto);
                 direction: var(--code-mirror-direction, ltr);
               }
+              .CodeMirror-scroll {
+                max-height: var(--code-mirror-max-height, --code-mirror-height);
+              }
               .CodeMirror-gutters {
                 border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
                 background-color: var(--paper-dialog-background-color, var(--primary-background-color));
@@ -46,7 +49,6 @@ export class HuiYamlEditor extends HTMLElement {
               .CodeMirror-linenumber {
                 color: var(--paper-dialog-color, var(--primary-text-color));
               }
-
               .rtl .CodeMirror-vscrollbar {
                 right: auto;
                 left: 0px;
@@ -89,12 +91,7 @@ export class HuiYamlEditor extends HTMLElement {
         mode: "yaml",
         tabSize: 2,
         autofocus: true,
-        extraKeys: {
+        viewportMargin: Infinity,
-          Tab: (cm: CodeMirror) => {
-            const spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
-            cm.replaceSelection(spaces);
-          },
-        },
         gutters:
           this._hass && computeRTL(this._hass!)
             ? ["rtl-gutter", "CodeMirror-linenumbers"]

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

@@ -36,6 +36,7 @@ import { ConfigValue, ConfigError } from "../types";
 import { EntityConfig } from "../../entity-rows/types";
 import { getCardElementTag } from "../../common/get-card-element-tag";
 import { addCard, replaceCard } from "../config-util";
+import { afterNextRender } from "../../../../common/util/render-status";
 
 declare global {
   interface HASSDomEvents {
@@ -182,8 +183,8 @@ export class HuiEditCard extends LitElement {
                     ?active="${this._saving}"
                     alt="Saving"
                   ></paper-spinner>
-                  ${this.hass!.localize("ui.common.save")}</mwc-button
+                  ${this.hass!.localize("ui.common.save")}
-                >
+                </mwc-button>
               </div>
             `
           : ""}
@@ -196,9 +197,10 @@ export class HuiEditCard extends LitElement {
     this._loading = false;
     this._resizeDialog();
     if (!this._uiEditor) {
-      setTimeout(() => {
+      afterNextRender(() => {
         this.yamlEditor.codemirror.refresh();
-      }, 1);
+        this._resizeDialog();
+      });
     }
   }
 
@@ -411,6 +413,10 @@ export class HuiEditCard extends LitElement {
     return [
       haStyleDialog,
       css`
+        :host {
+          --code-mirror-max-height: calc(100vh - 176px);
+        }
+
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
           paper-dialog {
@@ -456,12 +462,14 @@ export class HuiEditCard extends LitElement {
           .content {
             flex-direction: row;
           }
-          .content .element-editor {
+          .content > * {
-            flex: auto;
+            flex-basis: 0;
+            flex-grow: 1;
+            flex-shrink: 1;
+            min-width: 0;
           }
           .content hui-card-preview {
             margin: 0 10px;
-            flex: 490px;
             max-width: 490px;
           }
         }

src/resources/ha-style.ts

@@ -64,7 +64,6 @@ export const haStyleDialog = css`
   }
 
   .paper-dialog-buttons {
-    height: 56px;
     align-items: flex-end;
     padding: 8px;
   }