fix(ui): refresh overflow after font loads

Author: waleedlatif1

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

@@ -10,9 +10,20 @@ let host: HTMLDivElement
 let root: Root
 let resizeObserverCallback: ResizeObserverCallback
 let resizeObserverCount: number
+let originalFontsDescriptor: PropertyDescriptor | undefined
 
 beforeEach(() => {
   resizeObserverCount = 0
+  originalFontsDescriptor = Object.getOwnPropertyDescriptor(document, 'fonts')
+  const fontEvents = new EventTarget()
+  Object.defineProperty(fontEvents, 'ready', {
+    configurable: true,
+    value: Promise.resolve(fontEvents),
+  })
+  Object.defineProperty(document, 'fonts', {
+    configurable: true,
+    value: fontEvents,
+  })
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   vi.stubGlobal(
     'ResizeObserver',
@@ -34,6 +45,11 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root.unmount())
   host.remove()
+  if (originalFontsDescriptor) {
+    Object.defineProperty(document, 'fonts', originalFontsDescriptor)
+  } else {
+    Reflect.deleteProperty(document, 'fonts')
+  }
   vi.unstubAllGlobals()
 })
 
@@ -154,4 +170,21 @@ describe('OverflowText', () => {
     act(() => root.render(<OverflowText label='Short again' />))
     expect(label.className).not.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')
+    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(() => document.fonts.dispatchEvent(new Event('loadingdone')))
+    expect(label.className).toContain('mask-image:linear-gradient')
+
+    Object.defineProperty(label, 'scrollWidth', { configurable: true, value: 60 })
+    act(() => document.fonts.dispatchEvent(new Event('loadingerror')))
+    expect(label.className).not.toContain('mask-image:linear-gradient')
+  })
 })

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

@@ -230,14 +230,37 @@ export function useFloatingTooltip(
 const overflowMeasureByElement = new WeakMap<Element, () => void>()
 const observedOverflowElements = new Set<Element>()
 let sharedOverflowObserver: ResizeObserver | null = null
+let sharedOverflowFontSet: FontFaceSet | null = null
+
+function measureObservedOverflow() {
+  for (const element of observedOverflowElements) overflowMeasureByElement.get(element)?.()
+}
+
+function observeOverflowFontChanges() {
+  if (typeof document === 'undefined' || !document.fonts || sharedOverflowFontSet) return
+  const fontSet = document.fonts
+  sharedOverflowFontSet = fontSet
+  fontSet.addEventListener('loadingdone', measureObservedOverflow)
+  fontSet.addEventListener('loadingerror', measureObservedOverflow)
+  void fontSet.ready.then(() => {
+    if (sharedOverflowFontSet === fontSet) measureObservedOverflow()
+  })
+}
+
+function unobserveOverflowFontChanges() {
+  sharedOverflowFontSet?.removeEventListener('loadingdone', measureObservedOverflow)
+  sharedOverflowFontSet?.removeEventListener('loadingerror', measureObservedOverflow)
+  sharedOverflowFontSet = null
+}
 
 function observeOverflow(element: Element, measure: () => void): boolean {
+  overflowMeasureByElement.set(element, measure)
+  observedOverflowElements.add(element)
+  observeOverflowFontChanges()
   if (typeof ResizeObserver === 'undefined') return false
   sharedOverflowObserver ??= new ResizeObserver((entries) => {
     for (const entry of entries) overflowMeasureByElement.get(entry.target)?.()
   })
-  overflowMeasureByElement.set(element, measure)
-  observedOverflowElements.add(element)
   sharedOverflowObserver.observe(element)
   return true
 }
@@ -250,13 +273,14 @@ function unobserveOverflow(element: Element | null) {
   if (observedOverflowElements.size === 0) {
     sharedOverflowObserver?.disconnect()
     sharedOverflowObserver = null
+    unobserveOverflowFontChanges()
   }
 }
 
 /**
  * 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).
+ * `measurementKey` or loaded fonts change 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