Add auto-height option to resize editor

src/components/ha-grid-size-picker.ts

@@ -10,7 +10,7 @@ import { HomeAssistant } from "../types";
 import { conditionalClamp } from "../common/number/clamp";
 
 type GridSizeValue = {
-  rows?: number;
+  rows?: number | "auto";
   columns?: number;
 };
 
@@ -47,31 +47,44 @@ export class HaGridSizeEditor extends LitElement {
       this.columnMin !== undefined && this.columnMin === this.columnMax;
     const disabledRows =
       this.rowMin !== undefined && this.rowMin === this.rowMax;
+
+    const autoHeight = this._localValue?.rows === "auto";
+
+    const rowMin = this.rowMin ?? 1;
+    const rowMax = this.rowMax ?? this.rows;
+    const columnMin = this.columnMin ?? 1;
+    const columnMax = this.columnMax ?? this.columns;
+    const rowValue = autoHeight
+      ? this.rowMax ?? this.rows
+      : this._localValue?.rows;
+    const columnValue = this._localValue?.columns;
+
     return html`
       <div class="grid">
         <ha-grid-layout-slider
           aria-label=${this.hass.localize(
             "ui.components.grid-size-picker.columns"
           )}
           id="columns"
-          .min=${this.columnMin ?? 1}
-          .max=${this.columnMax ?? this.columns}
+          .min=${columnMin}
+          .max=${columnMax}
           .range=${this.columns}
-          .value=${this.value?.columns}
+          .value=${columnValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledColumns}
         ></ha-grid-layout-slider>
+
         <ha-grid-layout-slider
           aria-label=${this.hass.localize(
             "ui.components.grid-size-picker.rows"
           )}
           id="rows"
-          .min=${this.rowMin ?? 1}
-          .max=${this.rowMax ?? this.rows}
+          .min=${rowMin}
+          .max=${rowMax}
           .range=${this.rows}
           vertical
-          .value=${this.value?.rows}
+          .value=${rowValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledRows}
@@ -97,8 +110,8 @@ export class HaGridSizeEditor extends LitElement {
           style=${styleMap({
             "--total-rows": this.rows,
             "--total-columns": this.columns,
-            "--rows": this._localValue?.rows,
-            "--columns": this._localValue?.columns,
+            "--rows": rowValue,
+            "--columns": columnValue,
           })}
         >
           <div>
@@ -117,7 +130,7 @@ export class HaGridSizeEditor extends LitElement {
                 `;
               })}
           </div>
-          <div class="selected">
+          <div class="selected ${autoHeight ? "auto-height" : ""}">
             <div class="cell"></div>
           </div>
         </div>
@@ -215,10 +228,6 @@ export class HaGridSizeEditor extends LitElement {
         opacity: 0.2;
         cursor: pointer;
       }
-      .preview .cell[disabled] {
-        opacity: 0.05;
-        cursor: initial;
-      }
       .selected {
         pointer-events: none;
       }
@@ -228,6 +237,9 @@ export class HaGridSizeEditor extends LitElement {
         grid-row: 1 / span var(--rows, 0);
         opacity: 0.5;
       }
+      .selected.auto-height .cell {
+        opacity: 0.2;
+      }
     `,
   ];
 }

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -11,8 +11,10 @@ import "../../../../components/ha-button-menu";
 import "../../../../components/ha-grid-size-picker";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-slider";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-switch";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
@@ -61,11 +63,13 @@ export class HuiCardLayoutEditor extends LitElement {
       this._defaultLayoutOptions
     );
 
+    const sizeValue = this._gridSizeValue(options);
+
     return html`
       <div class="header">
         <p class="intro">
           ${this.hass.localize(
-            `ui.panel.lovelace.editor.edit_card.layout.explanation`
+            "ui.panel.lovelace.editor.edit_card.layout.explanation"
           )}
         </p>
         <ha-button-menu
@@ -124,18 +128,52 @@ export class HuiCardLayoutEditor extends LitElement {
         : html`
             <ha-grid-size-picker
               .hass=${this.hass}
-              .value=${this._gridSizeValue(options)}
+              .value=${sizeValue}
               .isDefault=${this._isDefault(this.config.layout_options)}
               @value-changed=${this._gridSizeChanged}
               .rowMin=${options.grid_min_rows}
               .rowMax=${options.grid_max_rows}
               .columnMin=${options.grid_min_columns}
               .columnMax=${options.grid_max_columns}
             ></ha-grid-size-picker>
+            <ha-settings-row two-line>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.panel.lovelace.editor.edit_card.layout.auto_height"
+                )}</span
+              >
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.lovelace.editor.edit_card.layout.auto_height_description"
+                )}
+              </span>
+              <ha-switch
+                @change=${this._autoChanged}
+                .checked=${sizeValue.rows === "auto"}
+              >
+              </ha-switch>
+            </ha-settings-row>
           `}
     `;
   }
 
+  private _autoChanged(ev: Event) {
+    const checked = (ev.target as any).checked;
+
+    const defaultRows =
+      typeof this._defaultLayoutOptions?.grid_rows === "number"
+        ? this._defaultLayoutOptions.grid_rows
+        : 2;
+    const newConfig: LovelaceCardConfig = {
+      ...this.config,
+      layout_options: {
+        ...this.config.layout_options,
+        grid_rows: checked ? "auto" : defaultRows,
+      },
+    };
+    fireEvent(this, "value-changed", { value: newConfig });
+  }
+
   protected firstUpdated(changedProps: PropertyValues<this>): void {
     super.firstUpdated(changedProps);
     try {

src/panels/lovelace/sections/hui-grid-section.ts

@@ -26,11 +26,11 @@ const CARD_SORTABLE_OPTIONS: HaSortableOptions = {
 
 export const DEFAULT_GRID_OPTIONS = {
   grid_columns: 4,
-  grid_rows: 1,
+  grid_rows: "auto",
 } as const satisfies LovelaceLayoutOptions;
 
 type GridSizeValue = {
-  rows?: number;
+  rows?: number | "auto";
   columns?: number;
 };
 

src/panels/lovelace/types.ts

@@ -42,7 +42,7 @@ export interface LovelaceBadge extends HTMLElement {
 
 export type LovelaceLayoutOptions = {
   grid_columns?: number;
-  grid_rows?: number;
+  grid_rows?: number | "auto";
   grid_max_columns?: number;
   grid_min_columns?: number;
   grid_min_rows?: number;

src/translations/en.json

@@ -5551,7 +5551,9 @@
               "explanation": "The card will be shown when ALL conditions below are fulfilled. If no conditions are set, the card will always be shown."
             },
             "layout": {
-              "explanation": "Configure how the card will appear on the dashboard. This settings will override the default size and position of the card."
+              "explanation": "Configure how the card will appear on the dashboard. This settings will override the default size and position of the card.",
+              "auto_height": "Auto height",
+              "auto_height_description": "The card will ignore the grid and will adjust its height to fit its content."
             }
           },
           "move_card": {