From d55bade07025869dfe787b9cc8a70736cbe6254b Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Tue, 7 Sep 2021 00:40:25 -0700
Subject: [PATCH] Small tweaks for the create automation from blueprint screen
 (#9980)

---
 .../automation/blueprint-automation-editor.ts | 156 +++++++++---------
 1 file changed, 80 insertions(+), 76 deletions(-)

diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts
index a7ccc8c07c..f0179d2fbd 100644
--- a/src/panels/config/automation/blueprint-automation-editor.ts
+++ b/src/panels/config/automation/blueprint-automation-editor.ts
@@ -53,7 +53,8 @@ export class HaBlueprintAutomationEditor extends LitElement {
 
   protected render() {
     const blueprint = this._blueprint;
-    return html`<ha-config-section vertical .isWide=${this.isWide}>
+    return html`
+      <ha-config-section vertical .isWide=${this.isWide}>
         ${!this.narrow
           ? html` <span slot="header">${this.config.alias}</span> `
           : ""}
@@ -118,81 +119,80 @@ export class HaBlueprintAutomationEditor extends LitElement {
         </ha-card>
       </ha-config-section>
 
-      <ha-config-section vertical .isWide=${this.isWide}>
-        <span slot="header"
-          >${this.hass.localize(
-            "ui.panel.config.automation.editor.blueprint.header"
-          )}</span
-        >
-        <ha-card>
-          <div class="blueprint-picker-container">
-            ${this._blueprints
-              ? Object.keys(this._blueprints).length
-                ? html`
-                    <ha-blueprint-picker
-                      .hass=${this.hass}
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.editor.blueprint.blueprint_to_use"
-                      )}
-                      .blueprints=${this._blueprints}
-                      .value=${this.config.use_blueprint.path}
-                      @value-changed=${this._blueprintChanged}
-                    ></ha-blueprint-picker>
-                  `
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.blueprint.no_blueprints"
-                  )
-              : html`<ha-circular-progress active></ha-circular-progress>`}
-          </div>
+      <ha-card
+        class="blueprint"
+        .header=${this.hass.localize(
+          "ui.panel.config.automation.editor.blueprint.header"
+        )}
+      >
+        <div class="blueprint-picker-container">
+          ${this._blueprints
+            ? Object.keys(this._blueprints).length
+              ? html`
+                  <ha-blueprint-picker
+                    .hass=${this.hass}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.editor.blueprint.blueprint_to_use"
+                    )}
+                    .blueprints=${this._blueprints}
+                    .value=${this.config.use_blueprint.path}
+                    @value-changed=${this._blueprintChanged}
+                  ></ha-blueprint-picker>
+                `
+              : this.hass.localize(
+                  "ui.panel.config.automation.editor.blueprint.no_blueprints"
+                )
+            : html`<ha-circular-progress active></ha-circular-progress>`}
+        </div>
 
-          ${this.config.use_blueprint.path
-            ? blueprint && "error" in blueprint
-              ? html`<p class="warning padding">
-                  There is an error in this Blueprint: ${blueprint.error}
-                </p>`
-              : html`${blueprint?.metadata.description
-                  ? html`<ha-markdown
-                      class="card-content"
-                      breaks
-                      .content=${blueprint.metadata.description}
-                    ></ha-markdown>`
-                  : ""}
-                ${blueprint?.metadata?.input &&
-                Object.keys(blueprint.metadata.input).length
-                  ? Object.entries(blueprint.metadata.input).map(
-                      ([key, value]) =>
-                        html`<ha-settings-row .narrow=${this.narrow}>
-                          <span slot="heading">${value?.name || key}</span>
-                          <span slot="description">${value?.description}</span>
-                          ${value?.selector
-                            ? html`<ha-selector
-                                .hass=${this.hass}
-                                .selector=${value.selector}
-                                .key=${key}
-                                .value=${(this.config.use_blueprint.input &&
-                                  this.config.use_blueprint.input[key]) ??
-                                value?.default}
-                                @value-changed=${this._inputChanged}
-                              ></ha-selector>`
-                            : html`<paper-input
-                                .key=${key}
-                                required
-                                .value=${(this.config.use_blueprint.input &&
-                                  this.config.use_blueprint.input[key]) ??
-                                value?.default}
-                                @value-changed=${this._inputChanged}
-                                no-label-float
-                              ></paper-input>`}
-                        </ha-settings-row>`
-                    )
-                  : html`<p class="padding">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.blueprint.no_inputs"
-                      )}
-                    </p>`}`
-            : ""}
-        </ha-card>
-      </ha-config-section>`;
+        ${this.config.use_blueprint.path
+          ? blueprint && "error" in blueprint
+            ? html`<p class="warning padding">
+                There is an error in this Blueprint: ${blueprint.error}
+              </p>`
+            : html`${blueprint?.metadata.description
+                ? html`<ha-markdown
+                    class="card-content"
+                    breaks
+                    .content=${blueprint.metadata.description}
+                  ></ha-markdown>`
+                : ""}
+              ${blueprint?.metadata?.input &&
+              Object.keys(blueprint.metadata.input).length
+                ? Object.entries(blueprint.metadata.input).map(
+                    ([key, value]) =>
+                      html`<ha-settings-row .narrow=${this.narrow}>
+                        <span slot="heading">${value?.name || key}</span>
+                        <span slot="description">${value?.description}</span>
+                        ${value?.selector
+                          ? html`<ha-selector
+                              .hass=${this.hass}
+                              .selector=${value.selector}
+                              .key=${key}
+                              .value=${(this.config.use_blueprint.input &&
+                                this.config.use_blueprint.input[key]) ??
+                              value?.default}
+                              @value-changed=${this._inputChanged}
+                            ></ha-selector>`
+                          : html`<paper-input
+                              .key=${key}
+                              required
+                              .value=${(this.config.use_blueprint.input &&
+                                this.config.use_blueprint.input[key]) ??
+                              value?.default}
+                              @value-changed=${this._inputChanged}
+                              no-label-float
+                            ></paper-input>`}
+                      </ha-settings-row>`
+                  )
+                : html`<p class="padding">
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.editor.blueprint.no_inputs"
+                    )}
+                  </p>`}`
+          : ""}
+      </ha-card>
+    `;
   }
 
   private async _getBlueprints() {
@@ -267,11 +267,15 @@ export class HaBlueprintAutomationEditor extends LitElement {
     return [
       haStyle,
       css`
+        ha-card.blueprint {
+          max-width: 1040px;
+          margin: 24px auto;
+        }
         .padding {
           padding: 16px;
         }
         .blueprint-picker-container {
-          padding: 16px;
+          padding: 0 16px 16px;
         }
         h3 {
           margin: 16px;