Adjust row height in grid (#21311)

* Set row height to 56px * Adjust padding and sizes * Adjust margin * Fix pointer-events * Fix image size * Clean code
2025-07-25 18:26:35 +00:00 · 2024-07-15 14:11:03 +02:00 · 2024-07-15 14:11:03 +02:00 · f70126eb62
commit f70126eb62
parent f87296d978
34 changed files with 762 additions and 999 deletions
--- a/src/components/ha-grid-size-picker.ts
+++ b/src/components/ha-grid-size-picker.ts
@ -20,7 +20,7 @@ export class HaGridSizeEditor extends LitElement {

  @property({ attribute: false }) public value?: GridSizeValue;

-  @property({ attribute: false }) public rows = 6;
+  @property({ attribute: false }) public rows = 8;

  @property({ attribute: false }) public columns = 4;

@ -205,7 +205,7 @@ export class HaGridSizeEditor extends LitElement {
      .preview {
        position: relative;
        grid-area: preview;
-        aspect-ratio: 1 / 1;
+        aspect-ratio: 1 / 1.2;
      }
      .preview > div {
        position: absolute;
--- a/src/components/tile/ha-tile-icon.ts
+++ b/src/components/tile/ha-tile-icon.ts
@ -17,7 +17,7 @@ export class HaTileIcon extends LitElement {
    return css`
      :host {
        --tile-icon-color: var(--disabled-color);
-        --mdc-icon-size: 24px;
+        --mdc-icon-size: 22px;
      }
      .shape::before {
        content: "";
@ -32,9 +32,9 @@ export class HaTileIcon extends LitElement {
      }
      .shape {
        position: relative;
-        width: 40px;
-        height: 40px;
-        border-radius: 20px;
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
--- a/src/components/tile/ha-tile-image.ts
+++ b/src/components/tile/ha-tile-image.ts
@ -25,9 +25,9 @@ export class HaTileImage extends LitElement {
    return css`
      .image {
        position: relative;
-        width: 40px;
-        height: 40px;
-        border-radius: 20px;
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
        display: flex;
        flex: none;
        align-items: center;
--- a/src/components/tile/ha-tile-info.ts
+++ b/src/components/tile/ha-tile-info.ts
@ -33,7 +33,7 @@ export class HaTileInfo extends LitElement {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
-        min-height: 40px;
+        height: 36px;
      }
      span {
        text-overflow: ellipsis;
--- a/src/panels/lovelace/card-features/common/card-feature-styles.ts
+++ b/src/panels/lovelace/card-features/common/card-feature-styles.ts
@ -0,0 +1,30 @@
+import { css } from "lit";
+
+export const cardFeatureStyles = css`
+  ha-control-select-menu {
+    box-sizing: border-box;
+    --control-select-menu-height: var(--feature-height);
+    --control-select-menu-border-radius: var(--feature-border-radius);
+    line-height: 1.2;
+    display: block;
+    width: 100%;
+  }
+  ha-control-select {
+    --control-select-color: var(--feature-color);
+    --control-select-padding: 0;
+    --control-select-thickness: var(--feature-height);
+    --control-select-border-radius: var(--feature-border-radius);
+    --control-select-button-border-radius: var(--feature-border-radius);
+  }
+  ha-control-button-group {
+    --control-button-group-spacing: var(--feature-button-spacing);
+    --control-button-group-thickness: var(--feature-height);
+  }
+  ha-control-slider {
+    --control-slider-color: var(--feature-color);
+    --control-slider-background: var(--feature-color);
+    --control-slider-background-opacity: 0.2;
+    --control-slider-thickness: var(--feature-height);
+    --control-slider-border-radius: var(--feature-border-radius);
+  }
+`;
--- a/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiShieldOff } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@ -21,6 +21,7 @@ import {
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import { AlarmModesCardFeatureConfig } from "./types";

@ -135,7 +136,6 @@ class HuiAlarmModeCardFeature
    }

    return html`
-      <div class="container">
      <ha-control-select
        .options=${options}
        .value=${this._currentMode}
@ -151,28 +151,11 @@ class HuiAlarmModeCardFeature
        .disabled=${this.stateObj!.state === UNAVAILABLE}
      >
      </ha-control-select>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --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;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-card-feature.ts
@ -0,0 +1,51 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../../types";
+import type { HuiErrorCard } from "../cards/hui-error-card";
+import { createCardFeatureElement } from "../create-element/create-card-feature-element";
+import type { LovelaceCardFeature } from "../types";
+import type { LovelaceCardFeatureConfig } from "./types";
+
+@customElement("hui-card-feature")
+export class HuiCardFeature extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ attribute: false }) public feature?: LovelaceCardFeatureConfig;
+
+  @property({ attribute: false }) public color?: string;
+
+  private _element?: LovelaceCardFeature | HuiErrorCard;
+
+  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
+    if (!this._element) {
+      this._element = createCardFeatureElement(feature);
+      return this._element;
+    }
+
+    return this._element;
+  }
+
+  protected render() {
+    if (!this.feature) {
+      return nothing;
+    }
+
+    const element = this._getFeatureElement(this.feature);
+
+    if (this.hass) {
+      element.hass = this.hass;
+      (element as LovelaceCardFeature).stateObj = this.stateObj;
+      (element as LovelaceCardFeature).color = this.color;
+    }
+    return html`${element}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-card-feature": HuiCardFeature;
+  }
+}
--- a/src/panels/lovelace/card-features/hui-card-features.ts
+++ b/src/panels/lovelace/card-features/hui-card-features.ts
@ -1,17 +1,8 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
-  CSSResultGroup,
-  LitElement,
-  TemplateResult,
-  css,
-  html,
-  nothing,
-} from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
-import type { HuiErrorCard } from "../cards/hui-error-card";
-import { createCardFeatureElement } from "../create-element/create-card-feature-element";
-import type { LovelaceCardFeature } from "../types";
+import "./hui-card-feature";
 import type { LovelaceCardFeatureConfig } from "./types";

@customElement("hui-card-features")
@ -24,44 +15,23 @@ export class HuiCardFeatures extends LitElement {

  @property({ attribute: false }) public color?: string;

-  private _featuresElements = new WeakMap<
-    LovelaceCardFeatureConfig,
-    LovelaceCardFeature | HuiErrorCard
-  >();
-
-  private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
-    if (!this._featuresElements.has(feature)) {
-      const element = createCardFeatureElement(feature);
-      this._featuresElements.set(feature, element);
-      return element;
-    }
-
-    return this._featuresElements.get(feature)!;
-  }
-
-  private renderFeature(
-    featureConf: LovelaceCardFeatureConfig,
-    stateObj: HassEntity
-  ): TemplateResult {
-    const element = this._getFeatureElement(featureConf);
-
-    if (this.hass) {
-      element.hass = this.hass;
-      (element as LovelaceCardFeature).stateObj = stateObj;
-      (element as LovelaceCardFeature).color = this.color;
-    }
-
-    return html`${element}`;
-  }
-
  protected render() {
    if (!this.features) {
      return nothing;
    }
    return html`
-      ${this.features.map((featureConf) =>
-        this.renderFeature(featureConf, this.stateObj)
+      <div class="container">
+        ${this.features.map(
+          (feature) => html`
+            <hui-card-feature
+              .hass=${this.hass}
+              .stateObj=${this.stateObj}
+              .color=${this.color}
+              .feature=${feature}
+            ></hui-card-feature>
+          `
        )}
+      </div>
    `;
  }

@ -69,8 +39,24 @@ export class HuiCardFeatures extends LitElement {
    return css`
      :host {
        --feature-color: var(--state-icon-color);
+        --feature-padding: 12px;
+        --feature-height: 42px;
+        --feature-border-radius: 12px;
+        --feature-button-spacing: 12px;
+        position: relative;
+        width: 100%;
+      }
+      .container {
+        position: relative;
        display: flex;
        flex-direction: column;
+        padding: var(--feature-padding);
+        padding-top: 0px;
+        gap: var(--feature-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        justify-content: space-evenly;
      }
    `;
  }
--- a/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiFan } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimateFanModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { ClimateFanModesCardFeatureConfig } from "./types";

 export const supportsClimateFanModesCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -140,7 +141,6 @@ class HuiClimateFanModesCardFeature

    if (this._config.style === "icons") {
      return html`
-        <div class="container">
        <ha-control-select
          .options=${options}
          .value=${this._currentFanMode}
@ -153,12 +153,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,32 +185,11 @@ class HuiClimateFanModesCardFeature
          `
        )}
      </ha-control-select-menu>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiThermostat } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
@ -19,6 +19,7 @@ import {
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
 import { ClimateHvacModesCardFeatureConfig } from "./types";

@ -139,7 +140,6 @@ class HuiClimateHvacModesCardFeature

    if (this._config.style === "dropdown") {
      return html`
-        <div class="container">
        <ha-control-select-menu
          show-arrow
          hide-label
@ -169,12 +169,10 @@ class HuiClimateHvacModesCardFeature
            `
          )}
        </ha-control-select-menu>
-        </div>
      `;
    }

    return html`
-      <div class="container">
      <ha-control-select
        .options=${options}
        .value=${this._currentHvacMode}
@ -187,31 +185,11 @@ class HuiClimateHvacModesCardFeature
        .disabled=${this.stateObj!.state === UNAVAILABLE}
      >
      </ha-control-select>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiTuneVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimatePresetModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { ClimatePresetModesCardFeatureConfig } from "./types";

 export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -142,7 +143,6 @@ class HuiClimatePresetModesCardFeature

    if (this._config.style === "icons") {
      return html`
-        <div class="container">
        <ha-control-select
          .options=${options}
          .value=${this._currentPresetMode}
@ -155,19 +155,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(
-            stateObj,
-            "preset_mode"
-          )}
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
        .value=${this._currentPresetMode}
        .disabled=${this.stateObj.state === UNAVAILABLE}
        fixedMenuPosition
@ -194,32 +189,11 @@ class HuiClimatePresetModesCardFeature
          `
        )}
      </ha-control-select-menu>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiArrowOscillating } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
 import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { ClimateSwingModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { ClimateSwingModesCardFeatureConfig } from "./types";

 export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -142,7 +143,6 @@ class HuiClimateSwingModesCardFeature

    if (this._config.style === "icons") {
      return html`
-        <div class="container">
        <ha-control-select
          .options=${options}
          .value=${this._currentSwingMode}
@ -155,12 +155,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,32 +190,11 @@ class HuiClimateSwingModesCardFeature
          `
        )}
      </ha-control-select-menu>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import {
@ -18,6 +18,7 @@ import {
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverOpenCloseCardFeatureConfig } from "./types";

 export const supportsCoverOpenCloseCardFeature = (stateObj: HassEntity) => {
@ -128,12 +129,7 @@ class HuiCoverOpenCloseCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeCssColor } from "../../../common/color/compute-color";
@ -10,10 +10,11 @@ import { stateColorCss } from "../../../common/entity/state_color";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { CoverEntityFeature } from "../../../data/cover";
 import { UNAVAILABLE } from "../../../data/entity";
+import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverPositionCardFeatureConfig } from "./types";
-import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";

 export const supportsCoverPositionCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -72,14 +73,14 @@ class HuiCoverPositionCardFeature
      : stateColorCss(this.stateObj);

    const style = {
-      "--color": color,
+      "--feature-color": color,
      // Use open color for inactive state to avoid grey slider that looks disabled
      "--state-cover-inactive-color": openColor,
    };

    return html`
-      <div class="container" style=${styleMap(style)}>
      <ha-control-slider
+        style=${styleMap(style)}
        .value=${value}
        min="0"
        max="100"
@ -97,7 +98,6 @@ class HuiCoverPositionCardFeature
        .unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
        .locale=${this.hass.locale}
      ></ha-control-slider>
-      </div>
    `;
  }

@ -112,19 +112,7 @@ class HuiCoverPositionCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-slider {
-        --control-slider-color: var(--color);
-        --control-slider-background: var(--color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
@ -1,19 +1,20 @@
 import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import {
+  CoverEntityFeature,
  canCloseTilt,
  canOpenTilt,
  canStopTilt,
-  CoverEntityFeature,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverTiltCardFeatureConfig } from "./types";

 export const supportsCoverTiltCardFeature = (stateObj: HassEntity) => {
@ -120,12 +121,7 @@ class HuiCoverTiltCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
@ -13,6 +13,7 @@ import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
 import { generateTiltSliderTrackBackgroundGradient } from "../../../state-control/cover/ha-state-control-cover-tilt-position";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { CoverTiltPositionCardFeatureConfig } from "./types";

 const GRADIENT = generateTiltSliderTrackBackgroundGradient();
@ -72,14 +73,14 @@ class HuiCoverTiltPositionCardFeature
      : stateColorCss(this.stateObj);

    const style = {
-      "--color": color,
+      "--feature-color": color,
      // Use open color for inactive state to avoid grey slider that looks disabled
      "--state-cover-inactive-color": openColor,
    };

    return html`
-      <div class="container" style=${styleMap(style)}>
      <ha-control-slider
+        style=${styleMap(style)}
        .value=${value}
        min="0"
        max="100"
@ -98,7 +99,6 @@ class HuiCoverTiltPositionCardFeature
      >
        <div slot="background" class="gradient"></div
      ></ha-control-slider>
-      </div>
    `;
  }

@ -113,24 +113,15 @@ class HuiCoverTiltPositionCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-slider {
-        /* Force inactive state to be colored for the slider */
-        --control-slider-color: var(--color);
-        --control-slider-background: var(--color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
+    return [
+      cardFeatureStyles,
+      css`
        .gradient {
          background: -webkit-linear-gradient(left, ${GRADIENT});
          opacity: 0.6;
        }
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiTuneVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -10,12 +10,13 @@ import "../../../components/ha-control-select";
 import type { ControlSelectOption } from "../../../components/ha-control-select";
 import "../../../components/ha-control-select-menu";
 import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
-import { FanEntity, FanEntityFeature } from "../../../data/fan";
 import { UNAVAILABLE } from "../../../data/entity";
+import { FanEntity, FanEntityFeature } from "../../../data/fan";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { FanPresetModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { FanPresetModesCardFeatureConfig } from "./types";

 export const supportsFanPresetModesCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -139,7 +140,6 @@ class HuiFanPresetModesCardFeature

    if (this._config.style === "icons") {
      return html`
-        <div class="container">
        <ha-control-select
          .options=${options}
          .value=${this._currentPresetMode}
@ -152,19 +152,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(
-            stateObj,
-            "preset_mode"
-          )}
+        .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
        .value=${this._currentPresetMode}
        .disabled=${this.stateObj.state === UNAVAILABLE}
        fixedMenuPosition
@ -191,32 +186,11 @@ class HuiFanPresetModesCardFeature
          `
        )}
      </ha-control-select-menu>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
@ -24,6 +24,7 @@ import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
 import { FanSpeedCardFeatureConfig } from "./types";
 import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
+import { cardFeatureStyles } from "./common/card-feature-styles";

 export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -88,7 +89,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 +103,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 +125,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
        .unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
        .locale=${this.hass.locale}
      ></ha-control-slider>
-      </div>
    `;
  }

@ -153,28 +150,16 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
  }

  static get styles() {
-    return css`
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
+    return [
+      cardFeatureStyles,
+      css`
        ha-control-select {
-        --control-select-color: var(--feature-color);
+          /* Color the background to match the slider style */
          --control-select-background: var(--feature-color);
          --control-select-background-opacity: 0.2;
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
        }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiTuneVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -17,8 +17,9 @@ import {
 } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { HumidifierModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { HumidifierModesCardFeatureConfig } from "./types";

 export const supportsHumidifierModesCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -143,7 +144,6 @@ class HuiHumidifierModesCardFeature

    if (this._config.style === "icons") {
      return html`
-        <div class="container">
        <ha-control-select
          .options=${options}
          .value=${this._currentMode}
@ -153,12 +153,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,32 +188,11 @@ class HuiHumidifierModesCardFeature
          `
        )}
      </ha-control-select-menu>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiPower, mdiWaterPercent } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, PropertyValues, TemplateResult, css, html } from "lit";
+import { LitElement, PropertyValues, TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -11,6 +11,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { HumidifierEntity, HumidifierState } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { HumidifierToggleCardFeatureConfig } from "./types";

 export const supportsHumidifierToggleCardFeature = (stateObj: HassEntity) => {
@ -95,7 +96,6 @@ class HuiHumidifierToggleCardFeature
    }));

    return html`
-      <div class="container">
      <ha-control-select
        .options=${options}
        .value=${this._currentState}
@ -108,24 +108,11 @@ class HuiHumidifierToggleCardFeature
        .disabled=${this.stateObj!.state === UNAVAILABLE}
      >
      </ha-control-select>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --control-select-button-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiHomeImportOutline, mdiPause, mdiPlay } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@ -14,6 +14,7 @@ import {
 } from "../../../data/lawn_mower";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import {
  LAWN_MOWER_COMMANDS,
  LawnMowerCommand,
@ -171,12 +172,7 @@ class HuiLawnMowerCommandCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
@ -8,6 +8,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { lightSupportsBrightness } from "../../../data/light";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { LightBrightnessCardFeatureConfig } from "./types";

 export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => {
@ -58,7 +59,6 @@ class HuiLightBrightnessCardFeature
        : undefined;

    return html`
-      <div class="container">
      <ha-control-slider
        .value=${position}
        min="1"
@ -70,7 +70,6 @@ class HuiLightBrightnessCardFeature
        unit="%"
        .locale=${this.hass.locale}
      ></ha-control-slider>
-      </div>
    `;
  }

@ -85,19 +84,7 @@ class HuiLightBrightnessCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
@ -16,6 +16,7 @@ import { LightColorMode, lightSupportsColorMode } from "../../../data/light";
 import { generateColorTemperatureGradient } from "../../../dialogs/more-info/components/lights/light-color-temp-picker";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { LightColorTempCardFeatureConfig } from "./types";

 export const supportsLightColorTempCardFeature = (stateObj: HassEntity) => {
@ -73,7 +74,6 @@ class HuiLightColorTempCardFeature
    const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);

    return html`
-      <div class="container">
      <ha-control-slider
        .value=${position}
        mode="cursor"
@ -89,7 +89,6 @@ class HuiLightColorTempCardFeature
        .unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
        .locale=${this.hass.locale}
      ></ha-control-slider>
-      </div>
    `;
  }

@ -108,22 +107,18 @@ class HuiLightColorTempCardFeature
  }

  static get styles() {
-    return css`
+    return [
+      cardFeatureStyles,
+      css`
        ha-control-slider {
-        --control-slider-color: var(--feature-color);
          --control-slider-background: -webkit-linear-gradient(
            left,
            var(--gradient)
          );
          --control-slider-background-opacity: 1;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
        }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiLock, mdiLockOpenVariant } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { CSSResultGroup, LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";

@ -14,6 +14,7 @@ import {
 } from "../../../data/lock";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { LockCommandsCardFeatureConfig } from "./types";

 export const supportsLockCommandsCardFeature = (stateObj: HassEntity) => {
@ -88,12 +89,7 @@ class HuiLockCommandsCardFeature
  }

  static get styles(): CSSResultGroup {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
@ -15,6 +15,7 @@ import {
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
 import { LockOpenDoorCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";

 export const supportsLockOpenDoorCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -112,14 +113,12 @@ class HuiLockOpenDoorCardFeature
  }

  static get styles(): CSSResultGroup {
-    return css`
+    return [
+      cardFeatureStyles,
+      css`
        ha-control-button {
          font-size: 14px;
        }
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
        .open-button {
          width: 130px;
        }
@ -140,7 +139,8 @@ class HuiLockOpenDoorCardFeature
          height: 40px;
          text-align: center;
        }
-    `;
+      `,
+    ];
  }
 }

--- a/src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
@ -1,16 +1,17 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
-import { isUnavailableState } from "../../../data/entity";
-import { HomeAssistant } from "../../../types";
-import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { NumericInputCardFeatureConfig } from "./types";
 import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-control-number-buttons";
 import "../../../components/ha-control-slider";
 import "../../../components/ha-icon";
+import { isUnavailableState } from "../../../data/entity";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
+import { NumericInputCardFeatureConfig } from "./types";

 export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -81,10 +82,9 @@ class HuiNumericInputCardFeature

    const stateObj = this.stateObj;

+    if (this._config.style === "buttons") {
      return html`
-      <div class="container">
-        ${this._config.style === "buttons"
-          ? html`<ha-control-number-buttons
+        <ha-control-number-buttons
          value=${stateObj.state}
          min=${stateObj.attributes.min}
          max=${stateObj.attributes.max}
@ -93,8 +93,11 @@ class HuiNumericInputCardFeature
          .disabled=${isUnavailableState(stateObj.state)}
          .unit=${stateObj.attributes.unit_of_measurement}
          .locale=${this.hass.locale}
-            ></ha-control-number-buttons>`
-          : html`<ha-control-slider
+        ></ha-control-number-buttons>
+      `;
+    }
+    return html`
+      <ha-control-slider
        value=${stateObj.state}
        min=${stateObj.attributes.min}
        max=${stateObj.attributes.max}
@ -103,28 +106,12 @@ class HuiNumericInputCardFeature
        .disabled=${isUnavailableState(stateObj.state)}
        .unit=${stateObj.attributes.unit_of_measurement}
        .locale=${this.hass.locale}
-            ></ha-control-slider>`}
-      </div>
+      ></ha-control-slider>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-number-buttons {
-        width: auto;
-      }
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-select-options-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-select-options-card-feature.ts
@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -10,8 +10,9 @@ import { InputSelectEntity } from "../../../data/input_select";
 import { SelectEntity } from "../../../data/select";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { SelectOptionsCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { SelectOptionsCardFeatureConfig } from "./types";

 export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => {
  const domain = computeDomain(stateObj.entity_id);
@ -119,7 +120,6 @@ class HuiSelectOptionsCardFeature
    );

    return html`
-      <div class="container">
      <ha-control-select-menu
        show-arrow
        hide-label
@ -139,25 +139,11 @@ class HuiSelectOptionsCardFeature
          `
        )}
      </ha-control-select-menu>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select-menu {
-        box-sizing: border-box;
-        --control-select-menu-height: 40px;
-        --control-select-menu-border-radius: 10px;
-        line-height: 1.2;
-        display: block;
-        width: 100%;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-control-slider";
@ -7,6 +7,7 @@ import { UNAVAILABLE } from "../../../data/entity";
 import { HumidifierEntity } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { TargetHumidityCardFeatureConfig } from "./types";

 export const supportsTargetHumidityCardFeature = (stateObj: HassEntity) => {
@ -84,7 +85,6 @@ class HuiTargetHumidityCardFeature
    }

    return html`
-      <div class="container">
      <ha-control-slider
        .value=${this.stateObj.attributes.humidity}
        .min=${this._min}
@ -92,31 +92,15 @@ class HuiTargetHumidityCardFeature
        .step=${this._step}
        .disabled=${this.stateObj!.state === UNAVAILABLE}
        @value-changed=${this._valueChanged}
-          .label=${this.hass.formatEntityAttributeName(
-            this.stateObj,
-            "humidity"
-          )}
+        .label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
        unit="%"
        .locale=${this.hass.locale}
      ></ha-control-slider>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-slider {
-        --control-slider-color: var(--feature-color);
-        --control-slider-background: var(--feature-color);
-        --control-slider-background-opacity: 0.2;
-        --control-slider-thickness: 40px;
-        --control-slider-border-radius: 10px;
-      }
-      .container {
-        padding: 0 12px 12px 12px;
-        width: auto;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../../common/const";
@ -18,6 +18,7 @@ import {
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { TargetTemperatureCardFeatureConfig } from "./types";

 type Target = "value" | "low" | "high";
@ -283,12 +284,7 @@ class HuiTargetTemperatureCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
@ -1,6 +1,6 @@
 import { mdiCancel, mdiCellphoneArrowDown } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stateActive } from "../../../common/entity/state_active";
@ -16,6 +16,7 @@ import {
 import { showUpdateBackupDialogParams } from "../../../dialogs/update_backup/show-update-backup-dialog";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { UpdateActionsCardFeatureConfig } from "./types";

 export const DEFAULT_UPDATE_BACKUP_OPTION = "ask";
@ -149,12 +150,7 @@ class HuiUpdateActionsCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
@ -8,7 +8,7 @@ import {
  mdiTargetVariant,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
@ -25,6 +25,7 @@ import {
 } from "../../../data/vacuum";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import {
  VACUUM_COMMANDS,
  VacuumCommand,
@ -210,12 +211,7 @@ class HuiVacuumCommandCardFeature
  }

  static get styles() {
-    return css`
-      ha-control-button-group {
-        margin: 0 12px 12px 12px;
-        --control-button-group-spacing: 12px;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
@ -1,5 +1,5 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
@ -18,8 +18,9 @@ import {
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
-import { WaterHeaterOperationModesCardFeatureConfig } from "./types";
+import { cardFeatureStyles } from "./common/card-feature-styles";
 import { filterModes } from "./common/filter-modes";
+import { WaterHeaterOperationModesCardFeatureConfig } from "./types";

 export const supportsWaterHeaterOperationModesCardFeature = (
  stateObj: HassEntity
@ -118,7 +119,6 @@ class HuiWaterHeaterOperationModeCardFeature
    }));

    return html`
-      <div class="container">
      <ha-control-select
        .options=${options}
        .value=${this._currentOperationMode}
@ -131,28 +131,11 @@ class HuiWaterHeaterOperationModeCardFeature
        .disabled=${this.stateObj!.state === UNAVAILABLE}
      >
      </ha-control-select>
-      </div>
    `;
  }

  static get styles() {
-    return css`
-      ha-control-select {
-        --control-select-color: var(--feature-color);
-        --control-select-padding: 0;
-        --control-select-thickness: 40px;
-        --control-select-border-radius: 10px;
-        --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;
-      }
-    `;
+    return cardFeatureStyles;
  }
 }

--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@ -113,8 +113,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
    let grid_min_columns = 2;
    let grid_rows = 1;
    if (this._config?.features?.length) {
-      const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
-      grid_rows += featureHeight;
+      grid_rows += this._config.features.length;
    }
    if (this._config?.vertical) {
      grid_rows++;
@ -279,6 +278,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
        >
          <ha-ripple .disabled=${!this.hasCardAction}></ha-ripple>
        </div>
+        <div class="container">
          <div class="content ${classMap(contentClasses)}">
            <div
              class="icon-container"
@ -324,6 +324,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                ></hui-card-features>
              `
            : nothing}
+        </div>
      </ha-card>
    `;
  }
@ -371,31 +372,43 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
        margin: calc(-1 * var(--ha-card-border-width, 1px));
        overflow: hidden;
      }
+      .container {
+        margin: calc(-1 * var(--ha-card-border-width, 1px));
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
      .content {
+        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
-        padding: 12px;
+        padding: 0 10px;
+        min-height: var(--row-height, 56px);
+        flex: 1;
+        pointer-events: none;
      }
      .vertical {
        flex-direction: column;
        text-align: center;
+        justify-content: center;
      }
      .vertical .icon-container {
-        margin-bottom: 12px;
+        margin-bottom: 10px;
        margin-right: 0;
        margin-inline-start: initial;
        margin-inline-end: initial;
      }
      .vertical ha-tile-info {
        width: 100%;
+        flex: none;
      }
      .icon-container {
        position: relative;
        flex: none;
-        margin-right: 12px;
+        margin-right: 10px;
        margin-inline-start: initial;
-        margin-inline-end: 12px;
+        margin-inline-end: 10px;
        direction: var(--direction);
        transition: transform 180ms ease-in-out;
      }
@ -414,8 +427,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
        inset-inline-end: -3px;
        inset-inline-start: initial;
      }
-      .icon-container:not([role="button"]) {
-        pointer-events: none;
+      .icon-container[role="button"] {
+        pointer-events: auto;
      }
      .icon-container[role="button"]:focus-visible,
      .icon-container[role="button"]:active {
@ -423,11 +436,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
      }
      ha-tile-info {
        position: relative;
-        flex: 1;
        min-width: 0;
        transition: background-color 180ms ease-in-out;
        box-sizing: border-box;
-        pointer-events: none;
      }
      hui-card-features {
        --feature-color: var(--tile-color);
--- a/src/panels/lovelace/sections/hui-grid-section.ts
+++ b/src/panels/lovelace/sections/hui-grid-section.ts
@ -214,7 +214,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
          --column-count: 4;
          --row-gap: var(--ha-section-grid-row-gap, 8px);
          --column-gap: var(--ha-section-grid-column-gap, 8px);
-          --row-height: 66px;
+          --row-height: var(--ha-section-grid-row-height, 56px);
          display: flex;
          flex-direction: column;
          gap: var(--row-gap);