fix(expandable-tile): set tile height using resize observer

[metonym]

Fixes #1730

Currently, the ExpandableTile does not dynamically set the height of the above-the-fold content. In cases where the content is dynamic (a lot of text), this can result in clipped content.

This PR aims to fix this problem by using the Resize Observer to set the height of the tile, and adjust it if the height changes. It implements the approach of the upstream React library almost verbatim.

In terms of behavior, this should not be a breaking change since you can still specify a custom tile height on the "above" and "below" slots.

Changes

• Fix ExpandableTile to use Resize Observer to set the tile max height
• Rework the docs to promote not setting a height; add an example for customizing the tile heights

---

Example

In the following example, I am clicking a button that doubles the text in the above-the-fold tile. Note how the tile height adjusts itself dynamically.

expandable-tile-double.mov

Issue #1730 (before)

expandable-tile-ex-before.mov

Issue #1730 (after)

expandable-tile-ex-after.mov

[theetrain]

This works well! 👍

[metonym]

Thanks for reviewing! 🙏