Simplify config

src/components/ha-control-select-menu.ts

@@ -83,7 +83,7 @@ export class HaControlSelectMenu extends SelectBase {
     if (!this.showArrow) return nothing;
 
     return html`
-      <div class="icon">
+      <div class="icon arrow">
         <ha-svg-icon .path=${mdiMenuDown}></ha-svg-icon>
       </div>
     `;
@@ -179,7 +179,8 @@ export class HaControlSelectMenu extends SelectBase {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        flex: 1;
+        width: 0;
+        flex-grow: 1;
         overflow: hidden;
       }
 
@@ -192,6 +193,13 @@ export class HaControlSelectMenu extends SelectBase {
         margin: auto;
       }
 
+      .arrow {
+        margin-left: -10px;
+        margin-inline-end: initial;
+        margin-inline-start: -10px;
+        direction: var(--direction);
+      }
+
       .label {
         font-size: 0.85em;
         letter-spacing: 0.4px;

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-card-features.ts

@@ -1,3 +1,4 @@
+import { mdiSwapHorizontal } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   CSSResultGroup,
@@ -7,9 +8,12 @@ import {
   html,
   nothing,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-control-button";
+import "../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../types";
 import type { HuiErrorCard } from "../cards/hui-error-card";
+import { LovelaceCardFeatureLayout } from "../cards/types";
 import { createCardFeatureElement } from "../create-element/create-card-feature-element";
 import type { LovelaceCardFeature } from "../types";
 import type { LovelaceCardFeatureConfig } from "./types";
@@ -22,8 +26,12 @@ export class HuiCardFeatures extends LitElement {
 
   @property({ attribute: false }) public features?: LovelaceCardFeatureConfig[];
 
+  @property({ attribute: false }) public layout?: LovelaceCardFeatureLayout;
+
   @property({ attribute: false }) public color?: string;
 
+  @state() private _currentFeatureIndex = 0;
+
   private _featuresElements = new WeakMap<
     LovelaceCardFeatureConfig,
     LovelaceCardFeature | HuiErrorCard
@@ -54,14 +62,47 @@ export class HuiCardFeatures extends LitElement {
     return html`${element}`;
   }
 
+  private _next() {
+    let newIndex = this._currentFeatureIndex + 1;
+    if (this.features?.length && newIndex >= this.features.length) {
+      newIndex = 0;
+    }
+    this._currentFeatureIndex = newIndex;
+  }
+
   protected render() {
     if (!this.features) {
       return nothing;
     }
+
+    if (this.layout === "compact") {
+      const currentFeature = this.features[this._currentFeatureIndex];
       return html`
+        <div class="container horizontal">
+          ${this.renderFeature(currentFeature, this.stateObj)}
+          ${this.features.length > 1
+            ? html`
+                <ha-control-button
+                  class="next"
+                  @click=${this._next}
+                  .label=${"Next"}
+                >
+                  <ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>
+                </ha-control-button>
+              `
+            : nothing}
+        </div>
+      `;
+    }
+
+    const containerClass = this.layout ? ` ${this.layout}` : "";
+
+    return html`
+      <div class="container${containerClass}">
         ${this.features.map((featureConf) =>
           this.renderFeature(featureConf, this.stateObj)
         )}
+      </div>
     `;
   }
 
@@ -69,8 +110,32 @@ export class HuiCardFeatures extends LitElement {
     return css`
       :host {
         --feature-color: var(--state-icon-color);
+        --feature-padding: 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%;
+        box-sizing: border-box;
+      }
+      .container.horizontal {
+        display: flex;
+        flex-direction: row;
+      }
+      .container.horizontal > * {
+        flex: 1;
+      }
+      .next {
+        flex: none !important;
+        --control-button-background-opacity: 0;
+        --control-button-padding: 0;
+        width: 32px;
       }
     `;
   }

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,10 +203,6 @@ class HuiClimateHvacModesCardFeature
         --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-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,10 +208,6 @@ class HuiClimatePresetModesCardFeature
         --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-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,10 +91,6 @@ class HuiLightBrightnessCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        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,10 +117,6 @@ class HuiLightColorTempCardFeature
         --control-slider-thickness: 40px;
         --control-slider-border-radius: 10px;
       }
-      .container {
-        padding: 0 12px 12px 12px;
-        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-target-temperature-card-feature.ts

@@ -285,7 +285,6 @@ class HuiTargetTemperatureCardFeature
   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-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;
-      }
     `;
   }
 }

src/panels/lovelace/cards/hui-tile-card.ts

@@ -126,9 +126,19 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
       grid_columns: 2,
       grid_rows: 1,
     };
+    const featureLayout = this._config?.feature_layout || "vertical";
+
     if (this._config?.features?.length) {
+      if (featureLayout === "compact") {
+        options.grid_rows += 1;
+      } else if (featureLayout === "horizontal") {
+        options.grid_rows += 1;
+        options.grid_columns = 4;
+      } else {
         options.grid_rows += Math.ceil((this._config.features.length * 2) / 3);
       }
+    }
+
     if (this._config?.vertical) {
       options.grid_rows++;
     }
@@ -428,6 +438,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .color=${this._config.color}
                 .features=${this._config.features}
+                .layout=${this._config.feature_layout}
               ></hui-card-features>
             `
           : nothing}

src/panels/lovelace/cards/types.ts

@@ -24,6 +24,8 @@ export type AlarmPanelCardConfigState =
   | "arm_vacation"
   | "arm_custom_bypass";
 
+export type LovelaceCardFeatureLayout = "vertical" | "horizontal" | "compact";
+
 export interface AlarmPanelCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string;
@@ -506,4 +508,5 @@ export interface TileCardConfig extends LovelaceCardConfig {
   double_tap_action?: ActionConfig;
   icon_tap_action?: ActionConfig;
   features?: LovelaceCardFeatureConfig[];
+  feature_layout?: LovelaceCardFeatureLayout;
 }

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

@@ -3,10 +3,16 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-button";
+import {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
 import "../../../../components/ha-sortable";
@@ -45,7 +51,9 @@ import { supportsUpdateActionsCardFeature } from "../../card-features/hui-update
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
 import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
 import { LovelaceCardFeatureConfig } from "../../card-features/types";
+import { LovelaceCardFeatureLayout } from "../../cards/types";
 import { getCardFeatureElementClass } from "../../create-element/create-card-feature-element";
+import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 
 export type FeatureType = LovelaceCardFeatureConfig["type"];
 type SupportsFeature = (stateObj: HassEntity) => boolean;
@@ -142,6 +150,9 @@ declare global {
     "features-changed": {
       features: LovelaceCardFeatureConfig[];
     };
+    "layout-changed": {
+      layout: LovelaceCardFeatureLayout;
+    };
   }
 }
 
@@ -154,6 +165,9 @@ export class HuiCardFeaturesEditor extends LitElement {
   @property({ attribute: false })
   public features?: LovelaceCardFeatureConfig[];
 
+  @property({ attribute: false })
+  public layout?: LovelaceCardFeatureLayout;
+
   @property({ attribute: false })
   public featuresTypes?: FeatureType[];
 
@@ -162,6 +176,37 @@ export class HuiCardFeaturesEditor extends LitElement {
 
   private _featuresKeys = new WeakMap<LovelaceCardFeatureConfig, string>();
 
+  private _optionsSchema = memoizeOne(
+    (_localize: LocalizeFunc) =>
+      [
+        {
+          name: "type",
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: ["vertical", "horizontal", "compact"].map((layout) => ({
+                label: capitalizeFirstLetter(layout),
+                value: layout,
+              })),
+            },
+          },
+        },
+      ] as const satisfies readonly HaFormSchema[]
+  );
+
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._optionsSchema>>
+  ) => {
+    switch (schema.name) {
+      case "type":
+        return "Layout";
+      default:
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.generic.${schema.name}`
+        );
+    }
+  };
+
   private _supportsFeatureType(type: string): boolean {
     if (!this.stateObj) return false;
 
@@ -235,6 +280,14 @@ export class HuiCardFeaturesEditor extends LitElement {
       isCustomType(type)
     );
 
+    const schema = this._optionsSchema(this.hass.localize);
+
+    const data = { ...this.layout };
+
+    if (!data.type) {
+      data.type = "vertical";
+    }
+
     return html`
       <ha-expansion-panel outlined>
         <h3 slot="header">
@@ -251,6 +304,17 @@ export class HuiCardFeaturesEditor extends LitElement {
                 </ha-alert>
               `
             : nothing}
+          ${supportedFeaturesType.length > 0
+            ? html`
+                <ha-form
+                  .hass=${this.hass}
+                  .data=${data}
+                  .schema=${schema}
+                  .computeLabel=${this._computeLabelCallback}
+                  @value-changed=${this._layoutChanged}
+                ></ha-form>
+              `
+            : nothing}
           <ha-sortable
             handle-selector=".handle"
             @item-moved=${this._featureMoved}
@@ -385,11 +449,17 @@ export class HuiCardFeaturesEditor extends LitElement {
 
   private _removeFeature(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
-    const newfeatures = this.features!.concat();
+    const newFeatures = this.features!.concat();
 
-    newfeatures.splice(index, 1);
+    newFeatures.splice(index, 1);
 
-    fireEvent(this, "features-changed", { features: newfeatures });
+    fireEvent(this, "features-changed", { features: newFeatures });
+  }
+
+  private _layoutChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const layout = ev.detail.value;
+    fireEvent(this, "layout-changed", { layout });
   }
 
   private _editFeature(ev: CustomEvent): void {

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

@@ -4,7 +4,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import {
-  any,
   array,
   assert,
   assign,
@@ -29,11 +28,15 @@ import {
   LovelaceCardFeatureContext,
 } from "../../card-features/types";
 import { getEntityDefaultTileIconAction } from "../../cards/hui-tile-card";
-import type { TileCardConfig } from "../../cards/types";
+import type {
+  LovelaceCardFeatureLayout,
+  TileCardConfig,
+} from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../hui-sub-element-editor";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { cardFeatureConfig } from "../structs/card-feature-struct";
 import { EditSubElementEvent, SubElementEditorConfig } from "../types";
 import { configElementStyle } from "./config-elements-style";
 import "./hui-card-features-editor";
@@ -93,6 +96,7 @@ const HIDDEN_ATTRIBUTES = [
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
+  cardFeatureConfig,
   object({
     entity: optional(string()),
     name: optional(string()),
@@ -104,7 +108,6 @@ const cardConfigStruct = assign(
     vertical: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     icon_tap_action: optional(actionConfigStruct),
-    features: optional(array(any())),
   })
 );
 
@@ -299,6 +302,8 @@ export class HuiTileCardEditor
         .stateObj=${stateObj}
         .features=${this._config!.features ?? []}
         @features-changed=${this._featuresChanged}
+        .layout=${this._config!.feature_layout}
+        @layout-changed=${this._layoutChanged}
         @edit-detail-element=${this._editDetailElement}
       ></hui-card-features-editor>
     `;
@@ -351,6 +356,21 @@ export class HuiTileCardEditor
     fireEvent(this, "config-changed", { config });
   }
 
+  private _layoutChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const layout = ev.detail.layout as LovelaceCardFeatureLayout;
+    const config: TileCardConfig = {
+      ...this._config,
+      feature_layout: layout,
+    };
+
+    fireEvent(this, "config-changed", { config });
+  }
+
   private subElementChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     if (!this._config || !this.hass) {

src/panels/lovelace/editor/structs/card-feature-struct.ts

@@ -0,0 +1,6 @@
+import { any, array, enums, object, optional } from "superstruct";
+
+export const cardFeatureConfig = object({
+  features: optional(array(any())),
+  feature_layout: optional(enums(["vertical", "horizontal", "compact"])),
+});