From 2bfd7ff33b0891013b9fa321ab469589a29113f7 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Thu, 24 Jan 2019 12:33:09 -0800
Subject: [PATCH] Use columns in edit card on wide screens (#2551)

---
 .../editor/card-editor/hui-edit-card.ts       | 65 +++++++++++++------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 519784a0f1..3e538eb003 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -115,21 +115,23 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
     let content;
     let preview;
     if (this._configElement !== undefined) {
-      if (this._uiEditor) {
-        content = html`
-          <div class="element-editor">${this._configElement}</div>
-        `;
-      } else {
-        content = html`
-          <hui-yaml-editor
-            .hass="${this.hass}"
-            .yaml="${this._configValue!.value}"
-            @yaml-changed="${this._handleYamlChanged}"
-          ></hui-yaml-editor>
-        `;
-      }
+      content = html`
+        <div class="element-editor">
+          ${
+            this._uiEditor
+              ? this._configElement
+              : html`
+                  <hui-yaml-editor
+                    .hass="${this.hass}"
+                    .yaml="${this._configValue!.value}"
+                    @yaml-changed="${this._handleYamlChanged}"
+                  ></hui-yaml-editor>
+                `
+          }
+        </div>
+      `;
+
       preview = html`
-        <hr />
         <hui-card-preview .hass="${this.hass}"> </hui-card-preview>
       `;
     }
@@ -156,7 +158,7 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
                 `
               : ""
           }
-          ${content} ${preview}
+          <div class="content">${content}${preview}</div>
         </paper-dialog-scrollable>
         ${
           !this._loading
@@ -430,6 +432,35 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
           margin-left: auto;
           margin-right: auto;
         }
+
+        .content {
+          display: flex;
+          flex-direction: column;
+        }
+        .content hui-card-preview {
+          margin-top: 16px;
+        }
+
+        @media (min-width: 1200px) {
+          paper-dialog {
+            max-width: none;
+            width: 1000px;
+          }
+
+          .content {
+            flex-direction: row;
+          }
+          .content .element-editor {
+            flex: auto;
+          }
+          .content hui-card-preview {
+            margin-top: 0;
+            margin-left: 24px;
+            flex: 490px;
+            max-width: 490px;
+          }
+        }
+
         .margin-bot {
           margin-bottom: 24px;
         }
@@ -454,10 +485,6 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
           color: #ef5350;
           border-bottom: 1px solid #ef5350;
         }
-        hr {
-          color: #000;
-          opacity: 0.12;
-        }
         hui-card-preview {
           padding-top: 8px;
           margin-bottom: 4px;