Make weather-forecast card more responsive (#24900)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import { classMap } from "lit/directives/class-map";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -74,17 +75,26 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
   private _sizeController = new ResizeController(this, {
     callback: (entries) => {
+      const result = {
+        width: "regular",
+        height: "tall",
+      };
+
       const width = entries[0]?.contentRect.width;
       if (width < 245) {
-        return "very-very-narrow";
+        result.height = "very-very-narrow";
+      } else if (width < 300) {
+        result.width = "very-narrow";
+      } else if (width < 375) {
+        result.width = "narrow";
       }
-      if (width < 300) {
+
-        return "very-narrow";
+      const height = entries[0]?.contentRect.height;
+      if (height < 235) {
+        result.height = "short";
       }
-      if (width < 375) {
+
-        return "narrow";
+      return result;
-      }
-      return "regular";
     },
   });
 
@@ -233,11 +243,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     );
 
     let itemsToShow = this._config?.forecast_slots ?? 5;
-    if (this._sizeController.value === "very-very-narrow") {
+    if (this._sizeController.value.width === "very-very-narrow") {
       itemsToShow = Math.min(3, itemsToShow);
-    } else if (this._sizeController.value === "very-narrow") {
+    } else if (this._sizeController.value.width === "very-narrow") {
       itemsToShow = Math.min(5, itemsToShow);
-    } else if (this._sizeController.value === "narrow") {
+    } else if (this._sizeController.value.width === "narrow") {
       itemsToShow = Math.min(7, itemsToShow);
     }
 
@@ -255,7 +265,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
     return html`
       <ha-card
-        class=${ifDefined(this._sizeController.value)}
+        class=${classMap({
+          [this._sizeController.value.height]: true,
+          [this._sizeController.value.width]: true,
+        })}
         @action=${this._handleAction}
         .actionHandler=${actionHandler({
           hasHold: hasAction(this._config!.hold_action),
@@ -489,7 +502,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         }
 
         .content + .forecast {
-          padding-top: 8px;
+          padding-top: 16px;
         }
 
         .icon-image {
@@ -585,8 +598,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         }
 
         .forecast-image-icon {
-          padding-top: 4px;
+          padding-top: 6px;
-          padding-bottom: 4px;
+          padding-bottom: 6px;
           display: flex;
           justify-content: center;
         }
@@ -684,11 +697,60 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
           flex-direction: column;
         }
 
+        [class*="very-very-narrow"] .icon-image {
+          min-width: 48px;
+        }
+
+        [class*="very-very-narrow"] .icon-image > * {
+          flex: 0 0 48px;
+          height: 48px;
+        }
+
+        [class*="very-very-narrow"] .content + .forecast {
+          padding-top: 8px;
+        }
+
         [class*="very-very-narrow"] .icon-image {
           margin-right: 0;
           margin-inline-end: 0;
           margin-inline-start: initial;
         }
+
+        /* ============= SHORT ============= */
+
+        .short .state,
+        .short .temp-attribute .temp {
+          font-size: 24px;
+          line-height: 1.25;
+        }
+
+        .short .content + .forecast {
+          padding-top: 12px;
+        }
+
+        .short .icon-image {
+          min-width: 48px;
+        }
+
+        .short .icon-image > * {
+          flex: 0 0 48px;
+          height: 48px;
+        }
+
+        .short .forecast-image-icon {
+          padding-top: 4px;
+          padding-bottom: 4px;
+        }
+
+        .short .forecast-image-icon > * {
+          width: 32px;
+          height: 32px;
+          --mdc-icon-size: 32px;
+        }
+
+        .short .forecast-icon {
+          --mdc-icon-size: 32px;
+        }
       `,
     ];
   }