From 128dbbcfefd06ea29eb7b77d378ad4a7f8cf6fa0 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 26 Jun 2024 10:03:10 +0200
Subject: [PATCH] Better resizing support for thermostat card (#21120)

* Better resizing support for thermostat card

* Use resize controller

* Fix typings

* Don't use query

* Use render to set style
---
 .../lovelace/cards/hui-humidifier-card.ts     | 68 ++++++++++++++----
 .../lovelace/cards/hui-thermostat-card.ts     | 70 +++++++++++++++----
 2 files changed, 109 insertions(+), 29 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index 990d0faaf7..f964148c0a 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -1,3 +1,4 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   CSSResultGroup,
@@ -26,6 +27,15 @@ import { HumidifierCardConfig } from "./types";
 
 @customElement("hui-humidifier-card")
 export class HuiHumidifierCard extends LitElement implements LovelaceCard {
+  private _resizeController = new ResizeController(this, {
+    callback: (entries) => {
+      const container = entries[0]?.target.shadowRoot?.querySelector(
+        ".container"
+      ) as HTMLElement | undefined;
+      return container?.clientHeight;
+    },
+  });
+
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-humidifier-card-editor");
     return document.createElement("hui-humidifier-card-editor");
@@ -123,16 +133,25 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
     const color = stateColorCss(stateObj);
 
+    const controlMaxWidth = this._resizeController.value
+      ? `${this._resizeController.value}px`
+      : undefined;
+
     return html`
       <ha-card>
         <p class="title">${name}</p>
-        <ha-state-control-humidifier-humidity
-          prevent-interaction-on-scroll
-          .showCurrentAsPrimary=${this._config.show_current_as_primary}
-          show-secondary
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-        ></ha-state-control-humidifier-humidity>
+        <div class="container">
+          <ha-state-control-humidifier-humidity
+            style=${styleMap({
+              maxWidth: controlMaxWidth,
+            })}
+            prevent-interaction-on-scroll
+            .showCurrentAsPrimary=${this._config.show_current_as_primary}
+            show-secondary
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+          ></ha-state-control-humidifier-humidity>
+        </div>
         <ha-icon-button
           class="more-info"
           .label=${this.hass!.localize(
@@ -156,10 +175,15 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-card {
-        height: 100%;
+      :host {
         position: relative;
-        overflow: hidden;
+        display: block;
+        height: 100%;
+      }
+      ha-card {
+        position: relative;
+        height: 100%;
+        width: 100%;
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -178,13 +202,28 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        flex: none;
       }
 
-      ha-state-control-humidifier-humidity {
-        width: 100%;
-        max-width: 344px; /* 12px + 12px + 320px */
-        padding: 0 12px 12px 12px;
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        max-width: 100%;
         box-sizing: border-box;
+        flex: 1;
+      }
+
+      .container:before {
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+
+      .container > * {
+        padding: 8px;
       }
 
       .more-info {
@@ -201,6 +240,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
       hui-card-features {
         width: 100%;
+        flex: none;
       }
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index cfa34d81e8..d8d58ee9c7 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -1,3 +1,4 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   CSSResultGroup,
@@ -18,14 +19,23 @@ import "../../../components/ha-icon-button";
 import { ClimateEntity } from "../../../data/climate";
 import "../../../state-control/climate/ha-state-control-climate-temperature";
 import { HomeAssistant } from "../../../types";
+import "../card-features/hui-card-features";
 import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import "../card-features/hui-card-features";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { ThermostatCardConfig } from "./types";
 
 @customElement("hui-thermostat-card")
 export class HuiThermostatCard extends LitElement implements LovelaceCard {
+  private _resizeController = new ResizeController(this, {
+    callback: (entries) => {
+      const container = entries[0]?.target.shadowRoot?.querySelector(
+        ".container"
+      ) as HTMLElement | undefined;
+      return container?.clientHeight;
+    },
+  });
+
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("../editor/config-elements/hui-thermostat-card-editor");
     return document.createElement("hui-thermostat-card-editor");
@@ -115,16 +125,25 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
     const color = stateColorCss(stateObj);
 
+    const controlMaxWidth = this._resizeController.value
+      ? `${this._resizeController.value}px`
+      : undefined;
+
     return html`
       <ha-card>
         <p class="title">${name}</p>
-        <ha-state-control-climate-temperature
-          prevent-interaction-on-scroll
-          .showCurrentAsPrimary=${this._config.show_current_as_primary}
-          show-secondary
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-        ></ha-state-control-climate-temperature>
+        <div class="container">
+          <ha-state-control-climate-temperature
+            style=${styleMap({
+              maxWidth: controlMaxWidth,
+            })}
+            prevent-interaction-on-scroll
+            .showCurrentAsPrimary=${this._config.show_current_as_primary}
+            show-secondary
+            .hass=${this.hass}
+            .stateObj=${stateObj}
+          ></ha-state-control-climate-temperature>
+        </div>
         <ha-icon-button
           class="more-info"
           .label=${this.hass!.localize(
@@ -148,10 +167,15 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-card {
-        height: 100%;
+      :host {
         position: relative;
-        overflow: hidden;
+        display: block;
+        height: 100%;
+      }
+      ha-card {
+        position: relative;
+        height: 100%;
+        width: 100%;
         padding: 0;
         display: flex;
         flex-direction: column;
@@ -170,13 +194,28 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        flex: none;
       }
 
-      ha-state-control-climate-temperature {
-        width: 100%;
-        max-width: 344px; /* 12px + 12px + 320px */
-        padding: 0 12px 12px 12px;
+      .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        max-width: 100%;
         box-sizing: border-box;
+        flex: 1;
+      }
+
+      .container:before {
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+
+      .container > * {
+        padding: 8px;
       }
 
       .more-info {
@@ -193,6 +232,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
       hui-card-features {
         width: 100%;
+        flex: none;
       }
     `;
   }