From cfadf4d7005a36d253c00aa35d0ea6c010e9b889 Mon Sep 17 00:00:00 2001
From: Zack Barett <zackbarett@hey.com>
Date: Wed, 4 May 2022 05:04:24 -0500
Subject: [PATCH] Fixes issue where the grid cards wouldnt be sized correctly
 (#12571)

---
 .../media-player/ha-media-player-browse.ts     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 2fbe792218..285ebcea54 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -1,4 +1,5 @@
 import "@lit-labs/virtualizer";
+import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import { grid } from "@lit-labs/virtualizer/layouts/grid";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
@@ -101,6 +102,10 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
+  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
+
+  private _observed = false;
+
   private _headerOffsetHeight = 0;
 
   private _resizeObserver?: ResizeObserver;
@@ -281,6 +286,19 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
+
+      // This fixes a race condition for resizing of the cards using the grid layout
+      if (this._observed) {
+        return;
+      }
+
+      // @ts-ignore
+      const virtualizer = this._virtualizer?._virtualizer;
+
+      if (virtualizer) {
+        this._observed = true;
+        setTimeout(() => virtualizer._observeMutations(), 0);
+      }
     }
   }