Fix height adjustment in ZoomElement in Safari

Problem, as described in [this thread](storybookjs#21138 (review))
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 is added next to MutationObserver (orignally added via
storybookjs#15472), not replaces it, because MutationObserver is better supported
by older browsers than ResizeObserver.

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

code/ui/components/src/Zoom/ZoomElement.tsx

@@ -1,6 +1,7 @@
 /* global MutationObserver */
 import type { ReactElement, RefObject } from 'react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+import useResizeObserver from 'use-resize-observer';
 import { styled } from '@storybook/theming';
 import { browserSupportsCssZoom } from './browserSupportsCssZoom';
 
@@ -62,6 +63,12 @@ export function ZoomElement({ scale, children }: ZoomProps) {
     setElementHeight(componentWrapperRef.current.getBoundingClientRect().height);
   }, []);
 
+  const onResize = useCallback(({height}) => {
+    if (height) {
+      setElementHeight(height);
+    }
+  }, []);
+
   useEffect(() => {
     if (componentWrapperRef.current) {
       setElementHeight(componentWrapperRef.current.getBoundingClientRect().height);
@@ -74,6 +81,11 @@ export function ZoomElement({ scale, children }: ZoomProps) {
     callback: handleMutations,
   });
 
+  useResizeObserver({
+    ref: componentWrapperRef,
+    onResize,
+  });
+
   return (
     <ZoomElementWrapper scale={scale} elementHeight={elementHeight}>
       <div