Make padding on settings row content consistent (#12139)

src/components/ha-service-control.ts

@@ -471,6 +471,7 @@ export class HaServiceControl extends LitElement {
       }
       ha-settings-row {
         --paper-time-input-justify-content: flex-end;
+        --settings-row-content-width: 100%;
         border-top: var(
           --service-control-items-border-top,
           1px solid var(--divider-color)
@@ -489,9 +490,6 @@ export class HaServiceControl extends LitElement {
         margin: var(--service-control-padding, 0 16px);
         padding: 16px 0;
       }
-      :host(:not([narrow])) ha-settings-row ha-selector {
-        width: 60%;
-      }
       .checkbox-spacer {
         width: 32px;
       }

src/components/ha-settings-row.ts

@@ -21,7 +21,7 @@ export class HaSettingsRow extends LitElement {
           <div secondary><slot name="description"></slot></div>
         </paper-item-body>
       </div>
-      <slot></slot>
+      <div class="content"><slot></slot></div>
     `;
   }
 
@@ -43,6 +43,18 @@ export class HaSettingsRow extends LitElement {
         );
         flex: 1;
       }
+      .content {
+        display: contents;
+      }
+      :host(:not([narrow])) .content {
+        display: flex;
+        justify-content: flex-end;
+        flex: 1;
+        padding: 16px 0;
+      }
+      .content ::slotted(*) {
+        width: var(--settings-row-content-width);
+      }
       :host([narrow]) {
         align-items: normal;
         flex-direction: column;

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

@@ -326,12 +326,9 @@ export class HaBlueprintAutomationEditor extends LitElement {
         }
         ha-settings-row {
           --paper-time-input-justify-content: flex-end;
+          --settings-row-content-width: 100%;
           border-top: 1px solid var(--divider-color);
         }
-        :host(:not([narrow])) ha-settings-row ha-textfield,
-        :host(:not([narrow])) ha-settings-row ha-selector {
-          width: 60%;
-        }
       `,
     ];
   }

src/panels/lovelace/components/hui-card-options.ts

@@ -116,7 +116,7 @@ export class HuiCardOptions extends LitElement {
         outline: 2px solid var(--primary-color);
       }
 
-      :host:not(.panel) ::slotted(*) {
+      :host(:not(.panel)) ::slotted(*) {
         display: block;
       }