Better handle auto height in card resize editor (#21260)

* Add auto-height option to resize editor

* Use min instead of max

* Remove auto height

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,6 +47,16 @@ 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 ? rowMin : this._localValue?.rows;
+    const columnValue = this._localValue?.columns;
+
     return html`
       <div class="grid">
         <ha-grid-layout-slider
@@ -54,24 +64,25 @@ export class HaGridSizeEditor extends LitElement {
             "ui.components.grid-size-picker.columns"
           )}
           id="columns"
-          .min=${this.columnMin ?? 1}
+          .min=${columnMin}
-          .max=${this.columnMax ?? this.columns}
+          .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}
+          .min=${rowMin}
-          .max=${this.rowMax ?? this.rows}
+          .max=${rowMax}
           .range=${this.rows}
           vertical
-          .value=${this.value?.rows}
+          .value=${rowValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
           .disabled=${disabledRows}
@@ -97,8 +108,8 @@ export class HaGridSizeEditor extends LitElement {
           style=${styleMap({
             "--total-rows": this.rows,
             "--total-columns": this.columns,
-            "--rows": this._localValue?.rows,
+            "--rows": rowValue,
-            "--columns": this._localValue?.columns,
+            "--columns": columnValue,
           })}
         >
           <div>
@@ -215,10 +226,6 @@ export class HaGridSizeEditor extends LitElement {
         opacity: 0.2;
         cursor: pointer;
       }
-      .preview .cell[disabled] {
-        opacity: 0.05;
-        cursor: initial;
-      }
       .selected {
         pointer-events: none;
       }

src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts

@@ -378,6 +378,9 @@ export class HaGridLayoutSlider extends LitElement {
       :host(:disabled) .handle:after {
         background: var(--disabled-color);
       }
+      :host(:disabled) .active {
+        background: var(--disabled-color);
+      }
       .pressed .handle {
         transition: none;
       }

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,7 +128,7 @@ 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}

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;