fix: recalculate text truncation logic on re-renders

Author: Elessar1802

src/Common/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, cloneElement } from 'react'
+import { useCallback, useState, cloneElement, useRef, useEffect } from 'react'
 import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
 
@@ -11,16 +11,33 @@ const Tooltip = ({
     ...rest
 }: TooltipProps) => {
     const [isTextTruncated, setIsTextTruncated] = useState(false)
+    const nodeRef = useRef<HTMLElement>(null)
 
-    const refCallback = useCallback((node: HTMLDivElement) => {
+    const refCallback = useCallback((node: HTMLElement) => {
         if (node) {
             // NOTE: for line-clamp we need to check scrollHeight against clientHeight since orientation
             // is set to vertical through -webkit-box-orient prop that is needed for line-clamp to work
             // see: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
+            nodeRef.current = node
             setIsTextTruncated(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight)
         }
     }, [])
 
+    useEffect(() => {
+        if (!nodeRef.current) {
+            return
+        }
+        const hasTextOverflown =
+            nodeRef.current?.scrollWidth > nodeRef.current?.clientWidth ||
+            nodeRef.current?.scrollHeight > nodeRef.current?.clientHeight
+        if (hasTextOverflown && !isTextTruncated) {
+            setIsTextTruncated(true)
+        }
+        if (!hasTextOverflown && isTextTruncated) {
+            setIsTextTruncated(false)
+        }
+    })
+
     return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
         cloneElement(child, { ...child.props, ref: refCallback })
     ) : (