diff --git a/app/routes/_gcn.user.endorsements/route.tsx b/app/routes/_gcn.user.endorsements/route.tsx
index 3f1623ead..0542e9300 100644
--- a/app/routes/_gcn.user.endorsements/route.tsx
+++ b/app/routes/_gcn.user.endorsements/route.tsx
@@ -26,7 +26,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { useElementSize } from 'usehooks-ts'
+import { useResizeObserver } from 'usehooks-ts'
 
 import { formatAuthor } from '../_gcn.circulars/circulars.lib'
 import type {
@@ -232,8 +232,11 @@ export function EndorsementRequestCard({
   const disabled = fetcher.state !== 'idle'
   const [showMore, setShowMore] = useState(false)
 
-  const [noteRef, { width }] = useElementSize()
-  const [noteContainerRef, { width: containerWidth }] = useElementSize()
+  const noteRef = useRef<HTMLSpanElement>(null)
+  const noteContainerRef = useRef<HTMLDivElement>(null)
+
+  const { width } = useResizeObserver({ ref: noteRef })
+  const { width: containerWidth } = useResizeObserver({ ref: noteContainerRef })
 
   return (
     <fetcher.Form method="POST">
@@ -246,7 +249,10 @@ export function EndorsementRequestCard({
             {endorsementRequest.note && (
               <div className="margin-top-0 margin-bottom-1">
                 Comments from the user:
-                {(width > containerWidth || showMore) && (
+                {((width !== undefined &&
+                  containerWidth !== undefined &&
+                  width > containerWidth) ||
+                  showMore) && (
                   <Button
                     type="button"
                     unstyled
diff --git a/package-lock.json b/package-lock.json
index 2360b0ff9..813110026 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,7 +56,7 @@
         "ts-dedent": "^2.2.0",
         "unified": "^10.0.0",
         "unist-builder": "^4.0.0",
-        "usehooks-ts": "^2.9.5"
+        "usehooks-ts": "^2.15.0"
       },
       "devDependencies": {
         "@architect/architect": "^10.16.3",
@@ -19148,8 +19148,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
@@ -26171,15 +26170,17 @@
       "dev": true
     },
     "node_modules/usehooks-ts": {
-      "version": "2.9.5",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.5.tgz",
-      "integrity": "sha512-M5LrjX9Wo4XRsof0zCCsq81x5+so/b89aUO53XPTjUehKAbOFhRq/DDRyv7qsRK4AEaJe1rhReFZqesPGnREhQ==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.15.0.tgz",
+      "integrity": "sha512-2bLQ632044hD1Hp879yAFOPabXfx7SbzEZYnpIiaCw6lTHiuvsNS1sc2UBVycasjvQImD6QsNERQXjKg7OuTaA==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
       "engines": {
         "node": ">=16.15.0"
       },
       "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0  || ^17 || ^18"
       }
     },
     "node_modules/util": {
diff --git a/package.json b/package.json
index 6b300deea..5bf45ef45 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "ts-dedent": "^2.2.0",
     "unified": "^10.0.0",
     "unist-builder": "^4.0.0",
-    "usehooks-ts": "^2.9.5"
+    "usehooks-ts": "^2.15.0"
   },
   "devDependencies": {
     "@architect/architect": "^10.16.3",