From 40191a88d498e47af34668d422afefc6cedb2097 Mon Sep 17 00:00:00 2001
From: Nathan Orick <cnathanorick@gmail.com>
Date: Tue, 27 Oct 2020 10:59:32 -0400
Subject: [PATCH] Allow edit card dialog to be made wider (#7492)

---
 .../editor/card-editor/hui-dialog-edit-card.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index a779dd2080..4c0c1cb903 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -54,6 +54,8 @@ export class HuiDialogEditCard extends LitElement
   implements HassDialog<EditCardDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ type: Boolean, reflect: true }) public large = false;
+
   @internalProperty() private _params?: EditCardDialogParams;
 
   @internalProperty() private _cardConfig?: LovelaceCardConfig;
@@ -82,6 +84,7 @@ export class HuiDialogEditCard extends LitElement
     this._viewConfig = params.lovelaceConfig.views[view];
     this._cardConfig =
       card !== undefined ? this._viewConfig.cards![card] : params.cardConfig;
+    this.large = false;
     if (this._cardConfig && !Object.isFrozen(this._cardConfig)) {
       this._cardConfig = deepFreeze(this._cardConfig);
     }
@@ -162,7 +165,7 @@ export class HuiDialogEditCard extends LitElement
       >
         <div slot="heading">
           <ha-header-bar>
-            <div slot="title">${heading}</div>
+            <div slot="title" @click=${this._enlarge}>${heading}</div>
             ${this._documentationURL !== undefined
               ? html`
                   <a
@@ -254,6 +257,10 @@ export class HuiDialogEditCard extends LitElement
     `;
   }
 
+  private _enlarge() {
+    this.large = !this.large;
+  }
+
   private _ignoreKeydown(ev: KeyboardEvent) {
     ev.stopPropagation();
   }
@@ -374,6 +381,15 @@ export class HuiDialogEditCard extends LitElement
           --dialog-z-index: 5;
         }
 
+        @media all and (min-width: 451px) and (min-height: 501px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 90vw;
+          }
+          :host([large]) .content {
+            width: calc(90vw - 48px);
+          }
+        }
+
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);