Fix ResizeObserver polyfilling

eslint.config.mjs

@@ -257,8 +257,6 @@ export default tseslint.config(
                 'Response.json',
                 // document-register-element
                 'document.registerElement',
-                // resize-observer-polyfill
-                'ResizeObserver',
                 // fast-text-encoding
                 'TextEncoder',
                 // intersection-observer

src/components/OffsetAppBar.tsx

@@ -1,6 +1,7 @@
 import AppBar, { type AppBarProps } from '@mui/material/AppBar';
 import useScrollTrigger from '@mui/material/useScrollTrigger';
 import React, { useLayoutEffect, useRef, useState, type FC, type PropsWithChildren } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
 
 /** The default height of an AppBar. */
 const DEFAULT_APP_BAR_HEIGHT = 64;

src/hooks/useElementSize.ts

@@ -1,5 +1,6 @@
 import { MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
 import useResizeObserver from '@react-hook/resize-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 
 interface Size {
     width: number;
@@ -19,7 +20,11 @@ export default function useElementSize<
         target.current && setSize(target.current.getBoundingClientRect());
     }, [target]);
 
-    useResizeObserver(target, (entry) => setSize(entry.contentRect));
+    useResizeObserver(
+        target,
+        (entry) => setSize(entry.contentRect),
+        { polyfill: ResizeObserver }
+    );
 
     return [target, size];
 }