Lovelace Cards: Update size calcs and add height fixes for horizontal stacks (#7177)

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -78,14 +78,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
   public async getCardSize(): Promise<number> {
     if (!this._config || !this.hass) {
-      return 5;
+      return 9;
     }
 
     const stateObj = this.hass.states[this._config.entity];
 
     return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
-      ? 3
-      : 8;
+      ? 4
+      : 9;
   }
 
   public setConfig(config: AlarmPanelCardConfig): void {
@@ -270,6 +270,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
       ha-card {
         padding-bottom: 16px;
         position: relative;
+        height: 100%;
+        box-sizing: border-box;
         --alarm-color-disarmed: var(--label-badge-green);
         --alarm-color-pending: var(--label-badge-yellow);
         --alarm-color-triggered: var(--label-badge-red);

src/panels/lovelace/cards/hui-button-card.ts

@@ -80,7 +80,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
 
   public getCardSize(): number {
     return (
-      (this._config?.show_icon ? 3 : 0) + (this._config?.show_name ? 1 : 0)
+      (this._config?.show_icon ? 4 : 0) + (this._config?.show_name ? 1 : 0)
     );
   }
 

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -101,7 +101,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    return 4;
+    return this._config?.header ? 1 : 0 + 11;
   }
 
   public connectedCallback(): void {
@@ -208,6 +208,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       ha-card {
         position: relative;
         padding: 0 8px 8px;
+        box-sizing: border-box;
+        height: 100%;
       }
 
       .header {

src/panels/lovelace/cards/hui-entities-card.ts

@@ -96,7 +96,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
     // +1 for the header
     let size =
-      (this._config.title || this._showHeaderToggle ? 1 : 0) +
+      (this._config.title || this._showHeaderToggle ? 2 : 0) +
       (this._config.entities.length || 1);
     if (this._headerElement) {
       const headerSize = computeCardSize(this._headerElement);

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -4,26 +4,25 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-
+import { styleMap } from "lit-html/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import "../../../components/ha-card";
+import "../../../components/ha-gauge";
 import type { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { GaugeCardConfig } from "./types";
-import "../../../components/ha-gauge";
-import { styleMap } from "lit-html/directives/style-map";
 
 export const severityMap = {
   red: "var(--label-badge-red)",
@@ -69,7 +68,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   @internalProperty() private _config?: GaugeCardConfig;
 
   public getCardSize(): number {
-    return 2;
+    return 4;
   }
 
   public setConfig(config: GaugeCardConfig): void {
@@ -195,10 +194,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      :host {
-        display: block;
-      }
-
       ha-card {
         cursor: pointer;
         height: 100%;

src/panels/lovelace/cards/hui-glance-card.ts

@@ -73,13 +73,14 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
   public getCardSize(): number {
     const rowHeight =
       (this._config!.show_icon ? 1 : 0) +
-        (this._config!.show_name && this._config!.show_state ? 1 : 0) || 1;
+      (this._config!.show_name ? 1 : 0) +
+      (this._config!.show_state ? 1 : 0);
 
     const numRows = Math.ceil(
       this._configEntities!.length / (this._config!.columns || 5)
     );
 
-    return (this._config!.title ? 1 : 0) + rowHeight * numRows;
+    return (this._config!.title ? 2 : 0) + rowHeight * numRows;
   }
 
   public setConfig(config: GlanceCardConfig): void {
@@ -189,10 +190,16 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      ha-card {
+        height: 100%;
+      }
       .entities {
         display: flex;
         padding: 0 16px 4px;
         flex-wrap: wrap;
+        height: 100%;
+        box-sizing: border-box;
+        align-content: center;
       }
       .entities.no-header {
         padding-top: 16px;

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -3,25 +3,25 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
+import { throttle } from "../../../common/util/throttle";
 import "../../../components/ha-card";
 import "../../../components/state-history-charts";
 import { CacheConfig, getRecentWithCache } from "../../../data/cached-history";
+import { HistoryResult } from "../../../data/history";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
+import { hasConfigOrEntitiesChanged } from "../common/has-changed";
 import { processConfigEntities } from "../common/process-config-entities";
 import { EntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 import { HistoryGraphCardConfig } from "./types";
-import { HistoryResult } from "../../../data/history";
-import { hasConfigOrEntitiesChanged } from "../common/has-changed";
-import { throttle } from "../../../common/util/throttle";
 
 @customElement("hui-history-graph-card")
 export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
@@ -67,7 +67,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
   private _throttleGetStateHistory?: () => void;
 
   public getCardSize(): number {
-    return 4;
+    return this._config?.title
+      ? 2
+      : 0 + 2 * (this._configEntities?.length || 1);
   }
 
   public setConfig(config: HistoryGraphCardConfig): void {
@@ -185,6 +187,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      ha-card {
+        height: 100%;
+        overflow-y: auto;
+      }
       .content {
         padding: 16px;
       }

src/panels/lovelace/cards/hui-horizontal-stack-card.ts

@@ -25,6 +25,7 @@ class HuiHorizontalStackCard extends HuiStackCard {
       css`
         #root {
           display: flex;
+          height: 100%;
         }
         #root > * {
           flex: 1 1 0;

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -1,4 +1,3 @@
-import "../../../components/ha-icon-button";
 import "@thomasloven/round-slider";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
@@ -6,9 +5,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   svg,
   TemplateResult,
@@ -18,8 +17,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-card";
-import { HumidifierEntity } from "../../../data/humidifier";
+import "../../../components/ha-icon-button";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
+import { HumidifierEntity } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -61,7 +61,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
   @internalProperty() private _setHum?: number;
 
   public getCardSize(): number {
-    return 5;
+    return 6;
   }
 
   public setConfig(config: HumidifierCardConfig): void {

src/panels/lovelace/cards/hui-iframe-card.ts

@@ -40,7 +40,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
 
   public getCardSize(): number {
     if (!this._config) {
-      return 3;
+      return 5;
     }
     const aspectRatio = this._config.aspect_ratio
       ? Number(this._config.aspect_ratio.replace("%", ""))

src/panels/lovelace/cards/hui-light-card.ts

@@ -68,7 +68,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
   private _brightnessTimout?: number;
 
   public getCardSize(): number {
-    return 4;
+    return 5;
   }
 
   public setConfig(config: LightCardConfig): void {
@@ -267,10 +267,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      :host {
-        display: block;
-      }
-
       ha-card {
         height: 100%;
         box-sizing: border-box;

src/panels/lovelace/cards/hui-map-card.ts

@@ -1,4 +1,3 @@
-import "../../../components/ha-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   Circle,
@@ -23,24 +22,25 @@ import {
 import { classMap } from "lit-html/directives/class-map";
 import {
   LeafletModuleType,
-  setupLeafletMap,
   replaceTileLayer,
+  setupLeafletMap,
 } from "../../../common/dom/setup-leaflet-map";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { debounce } from "../../../common/util/debounce";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
+import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
 import { fetchRecent } from "../../../data/history";
 import { HomeAssistant } from "../../../types";
 import "../../map/ha-entity-marker";
 import { findEntities } from "../common/find-entites";
+import { installResizeObserver } from "../common/install-resize-observer";
 import { processConfigEntities } from "../common/process-config-entities";
 import { EntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
-import "../../../components/ha-card";
 import { MapCardConfig } from "./types";
-import { installResizeObserver } from "../common/install-resize-observer";
 
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
@@ -162,7 +162,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   public getCardSize(): number {
     if (!this._config?.aspect_ratio) {
-      return 5;
+      return 7;
     }
 
     const ratio = parseAspectRatio(this._config.aspect_ratio);
@@ -660,17 +660,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      :host([ispanel]) ha-card {
-        width: 100%;
-        height: 100%;
-      }
-
       :host([ispanel][editMode]) ha-card {
         height: calc(100% - 51px);
       }
 
       ha-card {
         overflow: hidden;
+        width: 100%;
+        height: 100%;
       }
 
       #map {

src/panels/lovelace/cards/hui-markdown-card.ts

@@ -4,9 +4,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -15,8 +15,8 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
 import "../../../components/ha-card";
 import "../../../components/ha-markdown";
 import {
-  subscribeRenderTemplate,
   RenderTemplateResult,
+  subscribeRenderTemplate,
 } from "../../../data/ws-templates";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
@@ -170,6 +170,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      ha-card {
+        height: 100%;
+      }
       ha-markdown {
         padding: 0 16px 16px;
       }

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -761,6 +761,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     return css`
       ha-card {
         overflow: hidden;
+        height: 100%;
       }
 
       .background {

src/panels/lovelace/cards/hui-picture-card.ts

@@ -43,7 +43,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
   @property() protected _config?: PictureCardConfig;
 
   public getCardSize(): number {
-    return 3;
+    return 5;
   }
 
   public setConfig(config: PictureCardConfig): void {
@@ -113,6 +113,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
     return css`
       ha-card {
         overflow: hidden;
+        height: 100%;
       }
 
       ha-card.clickable {

src/panels/lovelace/cards/hui-picture-elements-card.ts

@@ -3,9 +3,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -149,6 +149,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
 
       ha-card {
         overflow: hidden;
+        height: 100%;
+        box-sizing: border-box;
       }
     `;
   }

src/panels/lovelace/cards/hui-picture-entity-card.ts

@@ -3,9 +3,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -182,6 +182,8 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
         min-height: 75px;
         overflow: hidden;
         position: relative;
+        height: 100%;
+        box-sizing: border-box;
       }
 
       hui-image.clickable {

src/panels/lovelace/cards/hui-picture-glance-card.ts

@@ -297,6 +297,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
         position: relative;
         min-height: 48px;
         overflow: hidden;
+        height: 100%;
+        box-sizing: border-box;
       }
 
       hui-image.clickable {

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -4,9 +4,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -19,9 +19,9 @@ import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { PlantAttributeTarget, PlantStatusCardConfig } from "./types";
-import { createEntityNotFoundWarning } from "../components/hui-warning";
 
 const SENSORS = {
   moisture: "hass:water",
@@ -163,6 +163,10 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
+      ha-card {
+        height: 100%;
+        box-sizing: border-box;
+      }
       .banner {
         display: flex;
         align-items: flex-end;

src/panels/lovelace/cards/hui-shopping-list-card.ts

@@ -1,13 +1,14 @@
 import "@polymer/paper-checkbox/paper-checkbox";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -23,11 +24,10 @@ import {
   ShoppingListItem,
   updateItem,
 } from "../../../data/shopping-list";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { SensorCardConfig, ShoppingListCardConfig } from "./types";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
 @customElement("hui-shopping-list-card")
 class HuiShoppingListCard extends SubscribeMixin(LitElement)
@@ -52,7 +52,7 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement)
   @internalProperty() private _checkedItems?: ShoppingListItem[];
 
   public getCardSize(): number {
-    return (this._config ? (this._config.title ? 1 : 0) : 0) + 3;
+    return (this._config ? (this._config.title ? 2 : 0) : 0) + 3;
   }
 
   public setConfig(config: ShoppingListCardConfig): void {
@@ -254,6 +254,8 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement)
     return css`
       ha-card {
         padding: 16px;
+        height: 100%;
+        box-sizing: border-box;
       }
 
       .has-header {

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -82,7 +82,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   @query("ha-card") private _card?: HaCard;
 
   public getCardSize(): number {
-    return 5;
+    return 7;
   }
 
   public setConfig(config: ThermostatCardConfig): void {

src/panels/lovelace/cards/hui-vertical-stack-card.ts

@@ -26,6 +26,7 @@ class HuiVerticalStackCard extends HuiStackCard {
         #root {
           display: flex;
           flex-direction: column;
+          height: 100%;
         }
         #root > * {
           margin: 4px 0 4px 0;

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

@@ -86,7 +86,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   public getCardSize(): number {
-    return this._config?.show_forecast !== false ? 4 : 2;
+    return this._config?.show_forecast !== false ? 5 : 2;
   }
 
   public setConfig(config: WeatherForecastCardConfig): void {
@@ -354,31 +354,38 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    if (this.offsetWidth < 375) {
+    const card = this.shadowRoot!.querySelector("ha-card");
+    // If we show an error or warning there is no ha-card
+    if (!card) {
+      return;
+    }
+
+    if (card.offsetWidth < 375) {
       this.setAttribute("narrow", "");
     } else {
       this.removeAttribute("narrow");
     }
-    if (this.offsetWidth < 300) {
+    if (card.offsetWidth < 300) {
       this.setAttribute("verynarrow", "");
     } else {
       this.removeAttribute("verynarrow");
     }
-    this._veryVeryNarrow = this.offsetWidth < 245;
+    this._veryVeryNarrow = card.offsetWidth < 245;
   }
 
   static get styles(): CSSResult[] {
     return [
       weatherSVGStyles,
       css`
-        :host {
-          display: block;
-        }
-
         ha-card {
           cursor: pointer;
-          padding: 16px;
           outline: none;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 16px;
+          box-sizing: border-box;
         }
 
         .content {

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -173,7 +173,7 @@ export const computeCards = (
       const cardConfig = {
         type: "weather-forecast",
         entity: entityId,
-        show_forecast: false
+        show_forecast: false,
       };
       cards.push(cardConfig);
     } else if (

src/panels/lovelace/header-footer/hui-buttons-header-footer.ts

@@ -1,10 +1,10 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   TemplateResult,
-  internalProperty,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "../common/process-config-entities";
@@ -25,7 +25,7 @@ export class HuiButtonsHeaderFooter extends LitElement
   @internalProperty() private _configEntities?: EntityConfig[];
 
   public getCardSize(): number {
-    return 1;
+    return 3;
   }
 
   public setConfig(config: ButtonsHeaderFooterConfig): void {

src/panels/lovelace/header-footer/hui-graph-header-footer.ts

@@ -1,16 +1,16 @@
-import "../../../components/ha-circular-progress";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
+import "../../../components/ha-circular-progress";
 import { fetchRecent } from "../../../data/history";
 import { HomeAssistant } from "../../../types";
 import { coordinates } from "../common/graph/coordinates";
@@ -42,7 +42,7 @@ export class HuiGraphHeaderFooter extends LitElement
   private _fetching = false;
 
   public getCardSize(): number {
-    return 2;
+    return 3;
   }
 
   public setConfig(config: GraphHeaderFooterConfig): void {

src/util/bytes-to-string.ts

@@ -1,10 +1,10 @@
 export const bytesToString = (value = 0, decimals = 2): string => {
   if (value === 0) {
-      return '0 Bytes';
+    return "0 Bytes";
   }
   const k = 1024;
   decimals = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
   const i = Math.floor(Math.log(value) / Math.log(k));
   return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
-}
+};