Fix formfield display (#6245)

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -143,15 +143,17 @@ class CloudGoogleAssistant extends LitElement {
             </ha-formfield>
             ${entity.might_2fa
               ? html`
-                  <ha-switch
-                    .entityId=${entity.entity_id}
-                    .checked=${Boolean(config.disable_2fa)}
-                    @change=${this._disable2FAChanged}
-                  >
-                    ${this.hass!.localize(
+                  <ha-formfield
+                    .label=${this.hass!.localize(
                       "ui.panel.config.cloud.google.disable_2FA"
                     )}
-                  </ha-switch>
+                  >
+                    <ha-switch
+                      .entityId=${entity.entity_id}
+                      .checked=${Boolean(config.disable_2fa)}
+                      @change=${this._disable2FAChanged}
+                    ></ha-switch>
+                  </ha-formfield>
                 `
               : ""}
           </div>
@@ -375,6 +377,9 @@ class CloudGoogleAssistant extends LitElement {
       state-info {
         cursor: pointer;
       }
+      ha-formfield {
+        display: block;
+      }
       ha-switch {
         padding: 8px 0;
       }

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -232,6 +232,9 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         .triggerlistitem {
           margin-bottom: 12px;
         }
+        ha-formfield {
+          display: block;
+        }
       `,
     ];
   }

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -318,6 +318,9 @@ export class DialogLovelaceDashboardDetail extends LitElement {
         ha-switch {
           padding: 16px 0;
         }
+        ha-formfield {
+          display: block;
+        }
       `,
     ];
   }

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -107,11 +107,11 @@ export class HuiButtonCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <ha-entity-picker
-        .label="${this.hass.localize(
-          "ui.panel.lovelace.editor.card.generic.entity"
-        )} (${this.hass.localize(
-      "ui.panel.lovelace.editor.card.config.optional"
-    )})"
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.entity"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
           .hass=${this.hass}
           .value="${this._entity}"
           .configValue=${"entity"}
@@ -120,11 +120,11 @@ export class HuiButtonCardEditor extends LitElement
         ></ha-entity-picker>
         <div class="side-by-side">
           <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-      "ui.panel.lovelace.editor.card.config.optional"
-    )})"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .value="${this._name}"
             .configValue="${"name"}"
             @value-changed="${this._valueChanged}"
@@ -133,49 +133,51 @@ export class HuiButtonCardEditor extends LitElement
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
-      "ui.panel.lovelace.editor.card.config.optional"
-    )})"
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .value=${this._icon}
-            .placeholder=${
-              this._icon || stateIcon(this.hass.states[this._entity])
-            }
+            .placeholder=${this._icon ||
+            stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
         </div>
         <div class="side-by-side">
-        <ha-formfield .label=${this.hass.localize(
-          "ui.panel.lovelace.editor.card.generic.show_name"
-        )}>  
-        <ha-switch
-            .checked="${this._config!.show_name !== false}"
-            .configValue="${"show_name"}"
-            @change="${this._valueChanged}"
-            ></ha-switch
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_name"
+            )}
           >
-        </ha-formfield>
-        <ha-formfield .label=${this.hass.localize(
-          "ui.panel.lovelace.editor.card.generic.show_icon"
-        )}>  
-        <ha-switch
-            .checked="${this._config!.show_icon !== false}"
-            .configValue="${"show_icon"}"
-            @change="${this._valueChanged}"
-            ></ha-switch
-          ></ha-formfield>
+            <ha-switch
+              .checked="${this._config!.show_name !== false}"
+              .configValue="${"show_name"}"
+              @change="${this._valueChanged}"
+            ></ha-switch>
+          </ha-formfield>
+          <ha-formfield
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_icon"
+            )}
+          >
+            <ha-switch
+              .checked="${this._config!.show_icon !== false}"
+              .configValue="${"show_icon"}"
+              @change="${this._valueChanged}"
+            ></ha-switch>
+          </ha-formfield>
         </div>
         <div class="side-by-side">
           <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.icon_height"
-          )} (${this.hass.localize(
-      "ui.panel.lovelace.editor.card.config.optional"
-    )})"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon_height"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .value="${this._icon_height}"
             .configValue="${"icon_height"}"
             @value-changed="${this._valueChanged}"
             type="number"
-          ><div class="suffix" slot="suffix">px</div>
+            ><div class="suffix" slot="suffix">px</div>
           </paper-input>
           <hui-theme-select-editor
             .hass=${this.hass}
@@ -183,16 +185,14 @@ export class HuiButtonCardEditor extends LitElement
             .configValue="${"theme"}"
             @value-changed="${this._valueChanged}"
           ></hui-theme-select-editor>
-        </paper-input>
-
         </div>
         <div class="side-by-side">
           <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.tap_action"
-          )} (${this.hass.localize(
-      "ui.panel.lovelace.editor.card.config.optional"
-    )})"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.tap_action"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .hass=${this.hass}
             .config="${this._tap_action}"
             .actions="${actions}"
@@ -200,11 +200,11 @@ export class HuiButtonCardEditor extends LitElement
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )} (${this.hass.localize(
-      "ui.panel.lovelace.editor.card.config.optional"
-    )})"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hold_action"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .hass=${this.hass}
             .config="${this._hold_action}"
             .actions="${actions}"

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -133,11 +133,11 @@ export class HuiViewEditor extends LitElement {
             @change=${this._valueChanged}
           ></ha-switch
         ></ha-formfield>
-        <span class="panel"
-          >${this.hass.localize(
+        <span class="panel">
+          ${this.hass.localize(
             "ui.panel.lovelace.editor.view.panel_mode.description"
-          )}</span
-        >
+          )}
+        </span>
       </div>
     `;
   }
@@ -181,6 +181,9 @@ export class HuiViewEditor extends LitElement {
       .panel {
         color: var(--secondary-text-color);
       }
+      ha-formfield {
+        display: block;
+      }
     `;
   }
 }