UI tweaks for BP (#7883)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/components/ha-blueprint-picker.ts

@@ -52,6 +52,7 @@ class HaBluePrintPicker extends LitElement {
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
         .disabled=${this.disabled}
+        horizontal-align="left"
       >
         <paper-listbox
           slot="dropdown-content"

src/components/ha-settings-row.ts

@@ -18,11 +18,6 @@ export class HaSettingsRow extends LitElement {
 
   protected render(): SVGTemplateResult {
     return html`
-      <style>
-        paper-item-body {
-          padding-right: 16px;
-        }
-      </style>
       <paper-item-body
         ?two-line=${!this.threeLine}
         ?three-line=${this.threeLine}
@@ -43,6 +38,14 @@ export class HaSettingsRow extends LitElement {
         align-self: auto;
         align-items: center;
       }
+      paper-item-body {
+        padding: 8px 16px 8px 0;
+      }
+      paper-item-body[two-line] {
+        min-height: calc(
+          var(--paper-item-body-two-line-min-height, 72px) - 16px
+        );
+      }
       :host([narrow]) {
         align-items: normal;
         flex-direction: column;
@@ -52,6 +55,9 @@ export class HaSettingsRow extends LitElement {
       ::slotted(ha-switch) {
         padding: 16px 0;
       }
+      div[secondary] {
+        white-space: normal;
+      }
     `;
   }
 }

src/panels/config/automation/blueprint-automation-editor.ts

@@ -157,42 +157,37 @@ export class HaBlueprintAutomationEditor extends LitElement {
                   There is an error in this Blueprint: ${blueprint.error}
                 </p>`
               : html`${blueprint?.metadata.description
-                  ? html`<p>${blueprint.metadata.description}</p>`
+                  ? html`<p class="card-content">
+                      ${blueprint.metadata.description}
+                    </p>`
                   : ""}
                 ${blueprint?.metadata?.input &&
                 Object.keys(blueprint.metadata.input).length
-                  ? html`<h3>
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.editor.blueprint.inputs"
-                        )}
-                      </h3>
-                      ${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-changed=${this._inputChanged}
-                                  no-label-float
-                                ></paper-input>`}
-                          </ha-settings-row>`
-                      )}`
+                  ? 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-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"

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -112,7 +112,6 @@ class HaBlueprintOverview extends LitElement {
       create: {
         title: "",
         type: narrow ? "icon-button" : undefined,
-        width: narrow ? undefined : "180px",
         template: (_, blueprint: any) =>
           blueprint.error
             ? ""
@@ -126,8 +125,9 @@ class HaBlueprintOverview extends LitElement {
                   "ui.panel.config.blueprint.overview.use_blueprint"
                 )}
                 @click=${(ev) => this._createNew(ev)}
-                ><ha-svg-icon .path=${mdiRobot}></ha-svg-icon
-              ></mwc-icon-button>`
+              >
+                <ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
+              </mwc-icon-button>`
             : html`<mwc-button
                 .blueprint=${blueprint}
                 @click=${(ev) => this._createNew(ev)}

src/translations/en.json

@@ -1161,7 +1161,6 @@
               "blueprint_to_use": "Blueprint to use",
               "no_blueprints": "You don't have any blueprints",
               "manage_blueprints": "Manage Blueprints",
-              "inputs": "Inputs",
               "no_inputs": "This blueprint doesn't have any inputs."
             },
             "modes": {