Fix height adjustment in ZoomElement in Safari

[jrencz]

What I did

I replaced a mutation observer with the hook useResizeObserver inside ZoomElement in order to make stories using custom elements resize properly in Safari

Problem is visualized in #21138 (comment)

Problem, as described in this thread affects stories rendered with custom elements using Shadow DOM. Such stories are affected if at the moment ZoomElement measures the height, component did not yet render its contents. Then, when component in a story renders content, it doesn't trigger MutationObserver (mutation callback is not called when Shadow DOM is altered).

ResizeObserver replaces the existing MutationObserver (orignally added via #15472).

Problem, as described in the original thread was mitigated by @JReinhold with #21163, but even after that fix Safari is excluded from using native zoom and needs the fallback behavior.

How to test

See https://github.com/jrencz/storybook-lity-story-height-repro

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[JReinhold]

Thanks for this! How do I test this? Do I just need a setup using web components that changes size over time?

I think we should replace the mutation observer completely with the resize observer because:

1. Can I Use shows a great support table for it, and works for all the browsers and versions we support in 7.0.
2. It was already introduced in another part of the UI recently as part of Tab UI Improvements #20783, so we've sort of already made it a requirement.

[jrencz]

Good point. I will try to provide some reproduction example, but until I find time to get it right

• try using @storybook/web-components-vite
• create component and story for it (i use Lit, maybe it matters, maybe not)
• maybe it matters that I globally use style :not(:defined) { display: none } turned out not to be relevant, see below

[jrencz]

@JReinhold I added a repository that reproduces the problem on beta.53 and allows to notice that ResizeObserver resolves it.

Before	After

If there's a way to integrate that in this repo instead of having a distinct one, please guide me how can I do it the right way.

I think we should replace the mutation observer completely

Let's clarify: do you want me to replace MutationObserver with ResizeObserver it in this PR instead of just adding ResizeObserver?

[JReinhold]

Before After

Great!

If there's a way to integrate that in this repo instead of having a distinct one, please guide me how can I do it the right way.

I don't think that'll be necessary in this case.

Let's clarify: do you want me to replace MutationObserver with ResizeObserver it in this PR instead of just adding ResizeObserver?

yup!

[jrencz]

It should be all right now. I extended the demo and found and fixed a problem, which I initially didn't notice (see commit message of c8509fb)

[JReinhold]

Looks good! Thanks for your contribution!