From 1e9ec824aeb03ac1bd4ad6111f4b2277d2868d32 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Thu, 27 Aug 2026 19:06:17 -0400
Subject: [PATCH] Fix ResizeObserver polyfilling

---
 eslint.config.mjs               | 2 --
 src/components/OffsetAppBar.tsx | 1 +
 src/hooks/useElementSize.ts     | 7 ++++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index f6ecacbef0..f098f56d10 100644
--- a/eslint.config.mjs
+++ b/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
diff --git a/src/components/OffsetAppBar.tsx b/src/components/OffsetAppBar.tsx
index f74c2b0572..a896aa7bf3 100644
--- a/src/components/OffsetAppBar.tsx
+++ b/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;
diff --git a/src/hooks/useElementSize.ts b/src/hooks/useElementSize.ts
index 88d9a364e0..91e34382ab 100644
--- a/src/hooks/useElementSize.ts
+++ b/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];
 }