From 44ff46102aea47d5188f2d9d0f2a209924ffebef Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 28 May 2023 10:11:07 -0700
Subject: [PATCH] fix(expandable-tile): set tile max height using Resize
 Observer

---
 src/Tile/ExpandableTile.svelte | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/Tile/ExpandableTile.svelte b/src/Tile/ExpandableTile.svelte
index 14b10297..fe8ae386 100644
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@@ -32,11 +32,23 @@
   /** Obtain a reference to the top-level element */
   export let ref = null;
 
-  import { afterUpdate } from "svelte";
+  import { afterUpdate, onMount } from "svelte";
   import ChevronDown from "../icons/ChevronDown.svelte";
 
   let refAbove = null;
 
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(([elem]) => {
+      tileMaxHeight = elem.contentRect.height;
+    });
+
+    resizeObserver.observe(refAbove);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
   afterUpdate(() => {
     if (tileMaxHeight === 0) {
       tileMaxHeight = refAbove.getBoundingClientRect().height;
@@ -62,10 +74,8 @@
   class:bx--tile--expandable="{true}"
   class:bx--tile--is-expanded="{expanded}"
   class:bx--tile--light="{light}"
+  style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
   {...$$restProps}
-  style="{expanded
-    ? $$restProps.style
-    : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
   on:click
   on:click="{() => {
     expanded = !expanded;