Lovelace Cards: Update size calcs and add height fixes for horizontal stacks

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,14 +1,13 @@
-import "../../../components/ha-icon-button";
 import "@thomasloven/round-slider";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   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 {