Robustify useTruncated

Also attempt to fix weird scrollHeight bug again

src/utils/useTruncated.js

@@ -1,17 +1,31 @@
 import { useRef } from 'preact/hooks';
+import { useDebouncedCallback } from 'use-debounce';
 import useResizeObserver from 'use-resize-observer';
 
 export default function useTruncated({ className = 'truncated' } = {}) {
   const ref = useRef();
+  const onResize = useDebouncedCallback(
+    ({ height }) => {
+      if (ref.current) {
+        const { scrollHeight } = ref.current;
+        let truncated = scrollHeight > height;
+        if (truncated) {
+          const { height: _height, maxHeight } = getComputedStyle(ref.current);
+          const computedHeight = parseInt(maxHeight || _height, 10);
+          truncated = scrollHeight > computedHeight;
+        }
+        ref.current.classList.toggle(className, truncated);
+      }
+    },
+    300,
+    {
+      maxWait: 2000,
+    },
+  );
   useResizeObserver({
     ref,
     box: 'border-box',
-    onResize: ({ height }) => {
+    onResize,
-      if (ref.current) {
-        const { scrollHeight } = ref.current;
-        ref.current.classList.toggle(className, scrollHeight > height);
-      }
-    },
   });
   return ref;
 }