Ignore aspect ratio in grid section (#21248)

* Ignore aspect ratio in grid section

* Feedback

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

@@ -55,7 +55,11 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../types";
 import "../components/hui-image";
 import "../components/hui-warning";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
+import {
+  LovelaceCard,
+  LovelaceCardEditor,
+  LovelaceLayoutOptions,
+} from "../types";
 import { AreaCardConfig } from "./types";
 
 export const DEFAULT_ASPECT_RATIO = "16:9";
@@ -102,6 +106,9 @@ export class HuiAreaCard
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false })
+  public layout?: string;
+
   @state() private _config?: AreaCardConfig;
 
   @state() private _entities?: EntityRegistryEntry[];
@@ -405,13 +412,17 @@ export class HuiAreaCard
     if (this._config.show_camera && "camera" in entitiesByDomain) {
       cameraEntityId = entitiesByDomain.camera[0].entity_id;
     }
+    cameraEntityId = "camera.demo_camera";
 
     const imageClass = area.picture || cameraEntityId;
+
+    const ignoreAspectRatio = imageClass || this.layout === "grid";
+
     return html`
       <ha-card
         class=${imageClass ? "image" : ""}
         style=${styleMap({
-          paddingBottom: imageClass
+          paddingBottom: ignoreAspectRatio
             ? "0"
             : `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
         })}
@@ -534,12 +545,20 @@ export class HuiAreaCard
     forwardHaptic("light");
   }
 
+  getLayoutOptions(): LovelaceLayoutOptions {
+    return {
+      grid_columns: 4,
+      grid_rows: 3,
+    };
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-card {
         overflow: hidden;
         position: relative;
         background-size: cover;
+        height: 100%;
       }
 
       .container {

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

@@ -23,14 +23,16 @@ declare global {
 
 @customElement("hui-card")
 export class HuiCard extends ReactiveElement {
-  @property({ type: Boolean }) public preview = false;
+  @property({ attribute: false }) public preview = false;
 
-  @property({ type: Boolean }) public isPanel = false;
+  @property({ attribute: false }) public isPanel = false;
 
   @property({ attribute: false }) public config?: LovelaceCardConfig;
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ attribute: false }) public layout?: string;
+
   private _elementConfig?: LovelaceCardConfig;
 
   public load() {
@@ -98,6 +100,7 @@ export class HuiCard extends ReactiveElement {
     if (this.hass) {
       this._element.hass = this.hass;
     }
+    this._element.layout = this.layout;
     this._element.preview = this.preview;
     // For backwards compatibility
     (this._element as any).editMode = this.preview;
@@ -176,6 +179,9 @@ export class HuiCard extends ReactiveElement {
       if (changedProps.has("isPanel")) {
         this._element.isPanel = this.isPanel;
       }
+      if (changedProps.has("layout")) {
+        this._element.layout = this.layout;
+      }
     }
 
     if (changedProps.has("hass") || changedProps.has("preview")) {

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

@@ -7,7 +7,11 @@ import "../../../components/ha-alert";
 import "../../../components/ha-card";
 import type { HomeAssistant } from "../../../types";
 import { IFRAME_SANDBOX } from "../../../util/iframe";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
+import {
+  LovelaceCard,
+  LovelaceCardEditor,
+  LovelaceLayoutOptions,
+} from "../types";
 import { IframeCardConfig } from "./types";
 
 @customElement("hui-iframe-card")
@@ -28,6 +32,9 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
 
+  @property({ attribute: false })
+  public layout?: string;
+
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @state() protected _config?: IframeCardConfig;
@@ -56,13 +63,16 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     }
 
     let padding = "";
-    if (!this.isPanel && this._config.aspect_ratio) {
-      const ratio = parseAspectRatio(this._config.aspect_ratio);
-      if (ratio && ratio.w > 0 && ratio.h > 0) {
-        padding = `${((100 * ratio.h) / ratio.w).toFixed(2)}%`;
+    const ignoreAspectRatio = this.isPanel || this.layout === "grid";
+    if (!ignoreAspectRatio) {
+      if (this._config.aspect_ratio) {
+        const ratio = parseAspectRatio(this._config.aspect_ratio);
+        if (ratio && ratio.w > 0 && ratio.h > 0) {
+          padding = `${((100 * ratio.h) / ratio.w).toFixed(2)}%`;
+        }
+      } else {
+        padding = "50%";
       }
-    } else if (!this.isPanel) {
-      padding = "50%";
     }
 
     const target_protocol = new URL(this._config.url, location.toString())
@@ -105,24 +115,25 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     `;
   }
 
+  public getLayoutOptions(): LovelaceLayoutOptions {
+    return {
+      grid_columns: 4,
+      grid_rows: 4,
+    };
+  }
+
   static get styles(): CSSResultGroup {
     return css`
-      :host([ispanel]) ha-card {
-        width: 100%;
-        height: 100%;
-      }
-
       ha-card {
         overflow: hidden;
+        width: 100%;
+        height: 100%;
       }
 
       #root {
         width: 100%;
-        position: relative;
-      }
-
-      :host([ispanel]) #root {
         height: 100%;
+        position: relative;
       }
 
       iframe {

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

@@ -39,7 +39,7 @@ import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
 import { processConfigEntities } from "../common/process-config-entities";
 import { EntityConfig } from "../entity-rows/types";
-import { LovelaceCard } from "../types";
+import { LovelaceCard, LovelaceLayoutOptions } from "../types";
 import { MapCardConfig } from "./types";
 
 export const DEFAULT_HOURS_TO_SHOW = 0;
@@ -57,6 +57,9 @@ class HuiMapCard extends LitElement implements LovelaceCard {
   @property({ type: Boolean, reflect: true })
   public isPanel = false;
 
+  @property({ attribute: false })
+  public layout?: string;
+
   @state() private _stateHistory?: HistoryStates;
 
   @state()
@@ -297,7 +300,9 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _computePadding(): void {
     const root = this.shadowRoot!.getElementById("root");
-    if (!this._config || this.isPanel || !root) {
+
+    const ignoreAspectRatio = this.isPanel || this.layout === "grid";
+    if (!this._config || ignoreAspectRatio || !root) {
       return;
     }
 
@@ -423,6 +428,13 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     }
   );
 
+  public getLayoutOptions(): LovelaceLayoutOptions {
+    return {
+      grid_columns: 4,
+      grid_rows: 4,
+    };
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-card {

src/panels/lovelace/sections/hui-grid-section.ts

@@ -98,6 +98,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
             (cardConfig) => this._getKey(cardConfig),
             (_cardConfig, idx) => {
               const card = this.cards![idx];
+              card.layout = "grid";
               const layoutOptions = card.getLayoutOptions();
 
               const columnSize =

src/panels/lovelace/types.ts

@@ -49,6 +49,7 @@ export interface LovelaceCard extends HTMLElement {
   hass?: HomeAssistant;
   isPanel?: boolean;
   preview?: boolean;
+  layout?: string;
   getCardSize(): number | Promise<number>;
   getLayoutOptions?(): LovelaceLayoutOptions;
   setConfig(config: LovelaceCardConfig): void;