From 4e3b16f9b8a830dba4738c736ee9e264711868c0 Mon Sep 17 00:00:00 2001
From: Dermot Duffy <dermot.duffy@gmail.com>
Date: Tue, 24 Sep 2024 20:01:49 -0700
Subject: [PATCH] fix: Multiple cards should form a masonry layout (#1585)

---
 src/card-controller/card-element-manager.ts     |  4 ----
 src/card.ts                                     | 11 +++++++++--
 .../card-element-manager.test.ts                | 17 -----------------
 3 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/card-controller/card-element-manager.ts b/src/card-controller/card-element-manager.ts
index fb3fa3fb..bea978c3 100644
--- a/src/card-controller/card-element-manager.ts
+++ b/src/card-controller/card-element-manager.ts
@@ -54,10 +54,6 @@ export class CardElementManager {
     return this._element.hasUpdated;
   }
 
-  public getCardHeight(): number {
-    return this._element.getBoundingClientRect().height;
-  }
-
   public elementConnected(): void {
     // Set initial condition state. Must be done after the element is connected to
     // allow callbacks to interact with the card.
diff --git a/src/card.ts b/src/card.ts
index 33a535af..88222fc0 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -455,8 +455,15 @@ class FrigateCard extends LitElement {
   }
 
   public getCardSize(): number {
-    // Lovelace card size is expressed in units of 50px.
-    return this._controller.getCardElementManager().getCardHeight() / 50;
+    // This method is called before the card is rendered. As such, we don't
+    // actually know what height the card will end up being, and for this card
+    // it may change significantly with usage. As such, we just return a fixed
+    // size guess (stock HA cards, such as the picture glance card, do similar).
+
+    // Lovelace card size is expressed in units of 50px. A 16:9 aspect-ratio
+    // camera will likely render as a 276.75px height masonary card => 5.52
+    // units of 50, round up to 6.
+    return 6;
   }
 }
 
diff --git a/tests/card-controller/card-element-manager.test.ts b/tests/card-controller/card-element-manager.test.ts
index 0ac1d74f..ee3b19c6 100644
--- a/tests/card-controller/card-element-manager.test.ts
+++ b/tests/card-controller/card-element-manager.test.ts
@@ -83,23 +83,6 @@ describe('CardElementManager', () => {
     expect(manager.hasUpdated()).toBeTruthy();
   });
 
-  it('should get height', () => {
-    const element = createLitElement();
-    element.getBoundingClientRect = vi.fn().mockReturnValue({
-      width: 200,
-      height: 800,
-    });
-
-    const manager = new CardElementManager(
-      createCardAPI(),
-      element,
-      () => undefined,
-      () => undefined,
-    );
-
-    expect(manager.getCardHeight()).toBe(800);
-  });
-
   it('should connect', () => {
     const windowAddEventListener = vi.spyOn(global.window, 'addEventListener');