fix: Multiple cards should form a masonry layout (#1585)

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.

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;
   }
 }
 

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');