Merge pull request #3330 from overleaf/jel-toolbar-btns

Hide toolbar text and show tooltip when out of space

GitOrigin-RevId: 5a73b69e7d92695c4f8691a747307908550e3790

services/web/frontend/js/shared/hooks/use-resize-observer.js

@@ -0,0 +1,38 @@
+import { useLayoutEffect, useRef } from 'react'
+
+function useResizeObserver(observedElement, observedData, callback) {
+  const resizeObserver = useRef()
+
+  function observe() {
+    resizeObserver.current = new ResizeObserver(function(elementsObserved) {
+      callback(elementsObserved[0])
+    })
+  }
+
+  function unobserve(observedCurrent) {
+    resizeObserver.current.unobserve(observedCurrent)
+  }
+
+  useLayoutEffect(
+    () => {
+      if ('ResizeObserver' in window) {
+        const observedCurrent = observedElement && observedElement.current
+
+        if (observedCurrent) {
+          observe(observedElement.current)
+        }
+
+        if (resizeObserver.current && observedCurrent) {
+          resizeObserver.current.observe(observedCurrent)
+        }
+
+        return () => {
+          unobserve(observedCurrent)
+        }
+      }
+    },
+    [observedElement, observedData]
+  )
+}
+
+export default useResizeObserver