fix(ui): remeasure overflow text changes

Author: waleedlatif1

packages/emcn/src/components/overflow-text/overflow-text.test.tsx

@@ -137,4 +137,21 @@ describe('OverflowText', () => {
 
     expect(resizeObserverCount).toBe(1)
   })
+
+  it('remeasures when an existing label changes', () => {
+    act(() => root.render(<OverflowText label='Short' />))
+    const label = host.querySelector<HTMLElement>('span')
+    if (!label) throw new Error('Overflow label did not render')
+
+    setWidths(label, 100, 60)
+    expect(label.className).not.toContain('mask-image:linear-gradient')
+
+    Object.defineProperty(label, 'scrollWidth', { configurable: true, value: 180 })
+    act(() => root.render(<OverflowText label='A newly long workflow name' />))
+    expect(label.className).toContain('mask-image:linear-gradient')
+
+    Object.defineProperty(label, 'scrollWidth', { configurable: true, value: 60 })
+    act(() => root.render(<OverflowText label='Short again' />))
+    expect(label.className).not.toContain('mask-image:linear-gradient')
+  })
 })

packages/emcn/src/components/overflow-text/overflow-text.tsx

@@ -39,7 +39,7 @@ export const OverflowText = memo(function OverflowText({
   className,
   showWhen,
 }: OverflowTextProps) {
-  const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>()
+  const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>(label)
   const { state, handlers } = useFloatingTooltip(() => {
     const element = node.current
     if (!element || label.length === 0) return false

packages/emcn/src/components/tooltip/tooltip.tsx

@@ -254,15 +254,20 @@ function unobserveOverflow(element: Element | null) {
 }
 
 /**
- * Tracks whether an element's text is horizontally clipped, re-measuring via a
- * shared `ResizeObserver` (or window resizes when the API is unavailable).
+ * Tracks whether an element's text is horizontally clipped, re-measuring when
+ * `measurementKey` changes and via a shared `ResizeObserver` (or window resizes
+ * when the API is unavailable).
  *
  * Returns a callback `ref` to attach to the element — the observer follows the
  * element across mount, unmount, and reassignment, so it is safe to use on
  * conditionally rendered children. `node` is a stable ref for reading the
  * current element (e.g. for live measurements in event handlers).
+ *
+ * @param measurementKey - Value whose changes may alter the element's rendered width.
  */
-export function useIsOverflowing<T extends HTMLElement = HTMLElement>(): {
+export function useIsOverflowing<T extends HTMLElement = HTMLElement>(
+  measurementKey?: unknown
+): {
   ref: (node: T | null) => void
   node: React.RefObject<T | null>
   isOverflowing: boolean
@@ -297,6 +302,10 @@ export function useIsOverflowing<T extends HTMLElement = HTMLElement>(): {
     }
   }, [measure])
 
+  React.useLayoutEffect(() => {
+    measure()
+  }, [measure, measurementKey])
+
   return { ref, node: nodeRef, isOverflowing }
 }