Improve sensor card graph inside section grid (#21289)

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

@@ -8,6 +8,7 @@ import {
   PropertyValues,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@@ -73,6 +74,8 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public layout?: string;
+
   @state() private _config?: EntityCardConfig;
 
   private _footerElement?: HuiErrorCard | LovelaceHeaderFooter;
@@ -132,8 +135,15 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
     const colored = stateObj && this.getStateColor(stateObj, this._config);
 
+    const fixedFooter =
+      this.layout === "grid" || this._footerElement !== undefined;
+
     return html`
-      <ha-card @click=${this._handleClick} tabindex="0">
+      <ha-card
+        @click=${this._handleClick}
+        tabindex="0"
+        class=${classMap({ "with-fixed-footer": fixedFooter })}
+      >
         <div class="header">
           <div class="name" .title=${name}>${name}</div>
           <div class="icon">
@@ -188,7 +198,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
               `
             : ""}
         </div>
-        ${this._footerElement}
+        <div class="footer">${this._footerElement}</div>
       </ha-card>
     `;
   }
@@ -309,6 +319,16 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
           font-size: 18px;
           color: var(--secondary-text-color);
         }
+
+        .with-fixed-footer {
+          justify-content: flex-start;
+        }
+        .with-fixed-footer .footer {
+          position: absolute;
+          right: 0;
+          left: 0;
+          bottom: 0;
+        }
       `,
     ];
   }