fix(ui): harden overflow measurement defaults

Author: waleedlatif1

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

@@ -85,6 +85,7 @@ describe('OverflowText', () => {
     setWidths(label, 80, 180)
 
     expect(label.classList.contains('overflow-hidden')).toBe(true)
+    expect(label.classList.contains('block')).toBe(true)
     expect(label.classList.contains('text-clip')).toBe(true)
     expect(label.classList.contains('whitespace-nowrap')).toBe(true)
     expect(label.classList.contains('truncate')).toBe(false)
@@ -211,6 +212,30 @@ describe('OverflowText', () => {
     expect(label.className).not.toContain('mask-image:linear-gradient')
   })
 
+  it('remeasures when decorated content changes without changing the label', () => {
+    act(() =>
+      root.render(
+        <OverflowText label='Workflow production'>
+          Workflow <mark>production</mark>
+        </OverflowText>
+      )
+    )
+    const label = host.querySelector<HTMLElement>('span')
+    if (!label) throw new Error('Overflow label did not render')
+
+    setWidths(label, 100, 60)
+    Object.defineProperty(label, 'scrollWidth', { configurable: true, value: 180 })
+    act(() =>
+      root.render(
+        <OverflowText label='Workflow production'>
+          Workflow <strong>production</strong>
+        </OverflowText>
+      )
+    )
+
+    expect(label.className).toContain('mask-image:linear-gradient')
+  })
+
   it('remeasures when loaded fonts change text width', () => {
     act(() => root.render(<OverflowText label='Workflow name' />))
     const label = host.querySelector<HTMLElement>('span')

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

@@ -45,7 +45,7 @@ export const OverflowText = memo(function OverflowText({
   tooltipEnabled = true,
   focusTarget,
 }: OverflowTextProps) {
-  const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>(label)
+  const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>(children ?? label)
   const tooltipEligible = tooltipEnabled && label.length > 0 && (Boolean(showWhen) || isOverflowing)
   const getFocusTarget = useCallback(() => {
     if (focusTarget !== 'nearest-interactive') return null
@@ -74,7 +74,7 @@ export const OverflowText = memo(function OverflowText({
         data-overflow-text=''
         className={cn(
           className,
-          'min-w-0 overflow-hidden text-clip whitespace-nowrap',
+          'block min-w-0 overflow-hidden text-clip whitespace-nowrap',
           isOverflowing && overflowTextFadeClass
         )}
         {...handlers}