Improve precise mode resizing with min and max

src/cards/template-card/template-card.ts

@@ -19,6 +19,7 @@ import {
   HomeAssistant,
   LovelaceCard,
   LovelaceCardEditor,
+  LovelaceGridOptions,
   LovelaceLayoutOptions,
   RenderTemplateResult,
   subscribeRenderTemplate,
@@ -116,6 +117,27 @@ export class TemplateCard extends MushroomBaseElement implements LovelaceCard {
     return options;
   }
 
+  // For HA < 2024.11
+  public getGridOptions(): LovelaceGridOptions {
+    // No min and max because the content can be dynamic
+    const options: LovelaceGridOptions = {
+      columns: 6,
+      rows: 1,
+    };
+    if (!this._config) return options;
+    const appearance = computeAppearance(this._config);
+    if (appearance.layout === "vertical") {
+      options.rows! += 1;
+    }
+    if (appearance.layout === "horizontal") {
+      options.columns = 12;
+    }
+    if (this._config?.multiline_secondary) {
+      options.rows = undefined;
+    }
+    return options;
+  }
+
   setConfig(config: TemplateCardConfig): void {
     TEMPLATE_KEYS.forEach((key) => {
       if (

src/ha/data/lovelace.ts

@@ -121,6 +121,15 @@ export interface LovelaceLayoutOptions {
   grid_rows?: number;
 }
 
+export interface LovelaceGridOptions {
+  columns?: number;
+  rows?: number;
+  min_columns?: number;
+  max_columns?: number;
+  min_rows?: number;
+  max_rows?: number;
+}
+
 export interface ToggleActionConfig extends BaseActionConfig {
   action: "toggle";
 }

src/utils/base-card.ts

@@ -8,6 +8,7 @@ import {
   HomeAssistant,
   isActive,
   isAvailable,
+  LovelaceGridOptions,
   LovelaceLayoutOptions,
 } from "../ha";
 import setupCustomlocalize from "../localize";
@@ -84,6 +85,7 @@ export class MushroomBaseCard<
     return height;
   }
 
+  // For HA < 2024.11
   public getLayoutOptions(): LovelaceLayoutOptions {
     if (!this._config) {
       return {
@@ -149,6 +151,76 @@ export class MushroomBaseCard<
     return options;
   }
 
+  public getGridOptions(): LovelaceGridOptions {
+    if (!this._config) {
+      return {
+        columns: 6,
+        rows: 1,
+      };
+    }
+
+    const options = {
+      min_rows: 1,
+      min_columns: 4,
+      columns: 6,
+      rows: 0, // initial value
+    };
+
+    const appearance = computeAppearance(this._config);
+
+    const collapsible_controls =
+      "collapsible_controls" in this._config &&
+      Boolean(this._config.collapsible_controls);
+
+    const hasInfo =
+      appearance.primary_info !== "none" ||
+      appearance.secondary_info !== "none";
+    const hasIcon = appearance.icon_type !== "none";
+    const active = this._stateObj && isActive(this._stateObj);
+
+    const hasControls = this.hasControls && (!collapsible_controls || active);
+
+    if (appearance.layout === "vertical") {
+      if (hasIcon) {
+        options.rows += 1;
+      }
+      if (hasInfo) {
+        options.rows += 1;
+      }
+      if (hasControls) {
+        options.rows += 1;
+      }
+      options.min_columns = 2;
+    }
+
+    if (appearance.layout === "horizontal") {
+      options.rows = 1;
+      options.columns = 12;
+    }
+
+    if (appearance.layout === "default") {
+      if (hasInfo || hasIcon) {
+        options.rows += 1;
+      }
+      if (hasControls) {
+        options.rows += 1;
+      }
+    }
+
+    // If icon only, set 3x1 for size
+    if (!hasControls && !hasInfo) {
+      options.columns = 3;
+      options.rows = 1;
+      options.min_columns = 2;
+    }
+
+    // Ensure card has at least 1 row
+    options.rows = Math.max(options.rows, 1);
+    options.min_rows = options.rows;
+
+    return options;
+  }
+
   protected renderPicture(picture: string): TemplateResult {
     return html`
       <mushroom-shape-avatar