Use the resize observer polyfill consistently (#7796)

src/components/views/elements/PersistedElement.tsx

@@ -24,6 +24,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from "../../../dispatcher/payloads";
+import { ResizeObserverPolyfill } from "../../../stores/UIStore";
 
 export const getPersistKey = (appId: string) => 'widget_' + appId;
 
@@ -80,7 +81,7 @@ export default class PersistedElement extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);
 
-        this.resizeObserver = new ResizeObserver(this.repositionChild);
+        this.resizeObserver = new ResizeObserverPolyfill(this.repositionChild);
         // Annoyingly, a resize observer is insufficient, since we also care
         // about when the element moves on the screen without changing its
         // dimensions. Doesn't look like there's a ResizeObserver equivalent

src/components/views/messages/CallEvent.tsx

@@ -27,6 +27,7 @@ import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
 import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
 import { formatCallTime } from "../../../DateUtils";
 import Clock from "../audio_messages/Clock";
+import { ResizeObserverPolyfill } from "../../../stores/UIStore";
 
 const MAX_NON_NARROW_WIDTH = 450 / 70 * 100;
 
@@ -63,7 +64,7 @@ export default class CallEvent extends React.PureComponent<IProps, IState> {
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.SilencedChanged, this.onSilencedChanged);
         this.props.callEventGrouper.addListener(CallEventGrouperEvent.LengthChanged, this.onLengthChanged);
 
-        this.resizeObserver = new ResizeObserver(this.resizeObserverCallback);
+        this.resizeObserver = new ResizeObserverPolyfill(this.resizeObserverCallback);
         this.wrapperElement.current && this.resizeObserver.observe(this.wrapperElement.current);
     }
 

src/stores/UIStore.ts

@@ -19,9 +19,9 @@ import ResizeObserverEntry from 'resize-observer-polyfill/src/ResizeObserverEntr
 
 // XXX: resize-observer-polyfill has types that now conflict with typescript's
 // own DOM types: https://github.com/que-etc/resize-observer-polyfill/issues/80
-// Using require here rather than import is a horrenous workaround. We should
+// Using require here rather than import is a horrendous workaround. We should
 // be able to remove the polyfill once Safari 14 is released.
-const ResizeObserverPolyfill = require('resize-observer-polyfill'); // eslint-disable-line @typescript-eslint/no-var-requires
+export const ResizeObserverPolyfill = require('resize-observer-polyfill'); // eslint-disable-line @typescript-eslint/no-var-requires
 
 export enum UI_EVENTS {
     Resize = "resize"