Fix feature padding

src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts

@@ -184,7 +184,6 @@ class HuiAlarmModeCardFeature
       `;
     }
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentMode}
@@ -200,7 +199,6 @@ class HuiAlarmModeCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
@@ -214,13 +212,8 @@ class HuiAlarmModeCardFeature
         --control-select-button-border-radius: 10px;
       }
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts

@@ -140,7 +140,6 @@ class HuiClimateFanModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentFanMode}
@@ -153,12 +152,10 @@ class HuiClimateFanModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -187,7 +184,6 @@ class HuiClimateFanModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
@@ -208,10 +204,6 @@ class HuiClimateFanModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts

@@ -139,7 +139,6 @@ class HuiClimateHvacModesCardFeature
 
     if (this._config.style === "dropdown") {
       return html`
-        <div class="container">
         <ha-control-select-menu
           show-arrow
           hide-label
@@ -169,12 +168,10 @@ class HuiClimateHvacModesCardFeature
             `
           )}
         </ha-control-select-menu>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentHvacMode}
@@ -187,7 +184,6 @@ class HuiClimateHvacModesCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
@@ -207,9 +203,6 @@ class HuiClimateHvacModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts

@@ -142,7 +142,6 @@ class HuiClimatePresetModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentPresetMode}
@@ -155,19 +154,14 @@ class HuiClimatePresetModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
-          .label=${this.hass!.formatEntityAttributeName(
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
-            stateObj,
-            "preset_mode"
-          )}
         .value=${this._currentPresetMode}
         .disabled=${this.stateObj.state === UNAVAILABLE}
         fixedMenuPosition
@@ -194,7 +188,6 @@ class HuiClimatePresetModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
@@ -215,9 +208,6 @@ class HuiClimatePresetModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts

@@ -142,7 +142,6 @@ class HuiClimateSwingModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentSwingMode}
@@ -155,12 +154,10 @@ class HuiClimateSwingModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -192,7 +189,6 @@ class HuiClimateSwingModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
@@ -213,10 +209,6 @@ class HuiClimateSwingModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts

@@ -130,7 +130,6 @@ class HuiCoverOpenCloseCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/card-features/hui-cover-position-card-feature.ts

@@ -78,8 +78,8 @@ class HuiCoverPositionCardFeature
     };
 
     return html`
-      <div class="container" style=${styleMap(style)}>
       <ha-control-slider
+        style=${styleMap(style)}
         .value=${value}
         min="0"
         max="100"
@@ -97,7 +97,6 @@ class HuiCoverPositionCardFeature
         .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -120,10 +119,6 @@ class HuiCoverPositionCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts

@@ -122,7 +122,6 @@ class HuiCoverTiltCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts

@@ -78,8 +78,8 @@ class HuiCoverTiltPositionCardFeature
     };
 
     return html`
-      <div class="container" style=${styleMap(style)}>
       <ha-control-slider
+        style=${styleMap(style)}
         .value=${value}
         min="0"
         max="100"
@@ -98,7 +98,6 @@ class HuiCoverTiltPositionCardFeature
       >
         <div slot="background" class="gradient"></div
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -122,10 +121,6 @@ class HuiCoverTiltPositionCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
       .gradient {
         background: -webkit-linear-gradient(left, ${GRADIENT});
         opacity: 0.6;

src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts

@@ -139,7 +139,6 @@ class HuiFanPresetModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentPresetMode}
@@ -152,19 +151,14 @@ class HuiFanPresetModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
-          .label=${this.hass!.formatEntityAttributeName(
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
-            stateObj,
-            "preset_mode"
-          )}
         .value=${this._currentPresetMode}
         .disabled=${this.stateObj.state === UNAVAILABLE}
         fixedMenuPosition
@@ -191,7 +185,6 @@ class HuiFanPresetModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
@@ -212,10 +205,6 @@ class HuiFanPresetModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts

@@ -88,7 +88,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
       const speed = fanPercentageToSpeed(this.stateObj, percentage);
 
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${speed}
@@ -103,14 +102,12 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     const value = Math.max(Math.round(percentage), 0);
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${value}
         min="0"
@@ -127,7 +124,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
         .unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -170,10 +166,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts

@@ -143,7 +143,6 @@ class HuiHumidifierModesCardFeature
 
     if (this._config.style === "icons") {
       return html`
-        <div class="container">
         <ha-control-select
           .options=${options}
           .value=${this._currentMode}
@@ -153,12 +152,10 @@ class HuiHumidifierModesCardFeature
           .disabled=${this.stateObj!.state === UNAVAILABLE}
         >
         </ha-control-select>
-        </div>
       `;
     }
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -190,7 +187,6 @@ class HuiHumidifierModesCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
@@ -211,10 +207,6 @@ class HuiHumidifierModesCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts

@@ -95,7 +95,6 @@ class HuiHumidifierToggleCardFeature
     }));
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentState}
@@ -108,7 +107,6 @@ class HuiHumidifierToggleCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
@@ -121,10 +119,6 @@ class HuiHumidifierToggleCardFeature
         --control-select-border-radius: 10px;
         --control-select-button-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts

@@ -173,7 +173,6 @@ class HuiLawnMowerCommandCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts

@@ -58,7 +58,6 @@ class HuiLightBrightnessCardFeature
         : undefined;
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${position}
         min="1"
@@ -70,7 +69,6 @@ class HuiLightBrightnessCardFeature
         unit="%"
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -93,9 +91,6 @@ class HuiLightBrightnessCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts

@@ -73,7 +73,6 @@ class HuiLightColorTempCardFeature
     const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${position}
         mode="cursor"
@@ -89,7 +88,6 @@ class HuiLightColorTempCardFeature
         .unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -119,9 +117,6 @@ class HuiLightColorTempCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts

@@ -90,7 +90,6 @@ class HuiLockCommandsCardFeature
   static get styles(): CSSResultGroup {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts

@@ -117,7 +117,6 @@ class HuiLockOpenDoorCardFeature
         font-size: 14px;
       }
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
       .open-button {
@@ -136,7 +135,6 @@ class HuiLockOpenDoorCardFeature
         gap: 8px;
         font-weight: 500;
         color: var(--success-color);
-        margin: 0 12px 12px 12px;
         height: 40px;
         text-align: center;
       }

src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts

@@ -82,7 +82,6 @@ class HuiNumericInputCardFeature
     const stateObj = this.stateObj;
 
     return html`
-      <div class="container">
       ${this._config.style === "buttons"
         ? html`<ha-control-number-buttons
             value=${stateObj.state}
@@ -104,7 +103,6 @@ class HuiNumericInputCardFeature
             .unit=${stateObj.attributes.unit_of_measurement}
             .locale=${this.hass.locale}
           ></ha-control-slider>`}
-      </div>
     `;
   }
 
@@ -120,10 +118,6 @@ class HuiNumericInputCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-select-options-card-feature.ts

@@ -119,7 +119,6 @@ class HuiSelectOptionsCardFeature
     );
 
     return html`
-      <div class="container">
       <ha-control-select-menu
         show-arrow
         hide-label
@@ -139,7 +138,6 @@ class HuiSelectOptionsCardFeature
           `
         )}
       </ha-control-select-menu>
-      </div>
     `;
   }
 
@@ -153,10 +151,6 @@ class HuiSelectOptionsCardFeature
         display: block;
         width: 100%;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts

@@ -84,7 +84,6 @@ class HuiTargetHumidityCardFeature
     }
 
     return html`
-      <div class="container">
       <ha-control-slider
         .value=${this.stateObj.attributes.humidity}
         .min=${this._min}
@@ -92,14 +91,10 @@ class HuiTargetHumidityCardFeature
         .step=${this._step}
         .disabled=${this.stateObj!.state === UNAVAILABLE}
         @value-changed=${this._valueChanged}
-          .label=${this.hass.formatEntityAttributeName(
+        .label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
-            this.stateObj,
-            "humidity"
-          )}
         unit="%"
         .locale=${this.hass.locale}
       ></ha-control-slider>
-      </div>
     `;
   }
 
@@ -112,10 +107,6 @@ class HuiTargetHumidityCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }

src/panels/lovelace/card-features/hui-update-actions-card-feature.ts

@@ -151,7 +151,6 @@ class HuiUpdateActionsCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts

@@ -212,7 +212,6 @@ class HuiVacuumCommandCardFeature
   static get styles() {
     return css`
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
     `;

src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts

@@ -118,7 +118,6 @@ class HuiWaterHeaterOperationModeCardFeature
     }));
 
     return html`
-      <div class="container">
       <ha-control-select
         .options=${options}
         .value=${this._currentOperationMode}
@@ -131,7 +130,6 @@ class HuiWaterHeaterOperationModeCardFeature
         .disabled=${this.stateObj!.state === UNAVAILABLE}
       >
       </ha-control-select>
-      </div>
     `;
   }
 
@@ -145,13 +143,8 @@ class HuiWaterHeaterOperationModeCardFeature
         --control-select-button-border-radius: 10px;
       }
       ha-control-button-group {
-        margin: 0 12px 12px 12px;
         --control-button-group-spacing: 12px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
     `;
   }
 }