fix(ui): preserve overflow server boundary

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/settings-resource-row/settings-resource-row.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useId, useState } from 'react'
+import { type ReactNode, useId } from 'react'
 import { cn, OverflowText } from '@sim/emcn'
 import { ArrowRight } from '@sim/emcn/icons'
 import Link from 'next/link'
@@ -135,7 +135,6 @@ export function SettingsResourceRow({
   flush = false,
   disabled = false,
 }: SettingsResourceRowProps) {
-  const [control, setControl] = useState<HTMLAnchorElement | HTMLButtonElement | null>(null)
   const describedById = useId()
   const isTile = iconVariant === 'tile'
   const isActivatable = !disabled && Boolean(onClick || href)
@@ -163,7 +162,7 @@ export function SettingsResourceRow({
           <OverflowText
             label={title}
             className='text-[var(--text-body)] text-sm'
-            focusTarget={isActivatable ? control : undefined}
+            focusTarget={isActivatable ? 'nearest-interactive' : undefined}
           />
         ) : (
           <span className='truncate text-[var(--text-body)] text-sm'>{title}</span>
@@ -232,7 +231,6 @@ export function SettingsResourceRow({
     >
       {href ? (
         <Link
-          ref={setControl}
           href={href}
           aria-label={clickLabel}
           aria-describedby={description != null ? describedById : undefined}
@@ -242,7 +240,6 @@ export function SettingsResourceRow({
         </Link>
       ) : (
         <button
-          ref={setControl}
           type='button'
           onClick={onClick}
           aria-label={clickLabel}

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

@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, useState } from 'react'
+import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { OverflowText } from './overflow-text'
@@ -138,19 +138,13 @@ describe('OverflowText', () => {
   })
 
   it('opens from an external composite control keyboard focus', () => {
-    function CompositeLabel() {
-      const [focusTarget, setFocusTarget] = useState<HTMLButtonElement | null>(null)
-      return (
-        <>
-          <button ref={setFocusTarget} type='button'>
-            Open workflow
-          </button>
-          <OverflowText label='A long workflow name' focusTarget={focusTarget} />
-        </>
+    act(() =>
+      root.render(
+        <button type='button'>
+          <OverflowText label='A long workflow name' focusTarget='nearest-interactive' />
+        </button>
       )
-    }
-
-    act(() => root.render(<CompositeLabel />))
+    )
     const button = host.querySelector('button')
     const label = host.querySelector<HTMLElement>('[data-overflow-text]')
     if (!button || !label) throw new Error('Composite label did not render')

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

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { memo } from 'react'
+import { memo, useCallback } from 'react'
 import { cn } from '../../lib/cn'
 import {
   FloatingTooltip,
@@ -25,8 +25,8 @@ export interface OverflowTextProps {
   showWhen?: boolean
   /** Whether the full-value tooltip may open. Disable for visual mirror layers. */
   tooltipEnabled?: boolean
-  /** External composite control whose keyboard focus should reveal the tooltip. */
-  focusTarget?: HTMLElement | null
+  /** Lets the nearest interactive ancestor own keyboard focus for this label. */
+  focusTarget?: 'nearest-interactive'
 }
 
 /**
@@ -47,13 +47,24 @@ export const OverflowText = memo(function OverflowText({
 }: OverflowTextProps) {
   const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>(label)
   const tooltipEligible = tooltipEnabled && label.length > 0 && (Boolean(showWhen) || isOverflowing)
+  const getFocusTarget = useCallback(() => {
+    if (focusTarget !== 'nearest-interactive') return null
+    return (
+      node.current?.closest<HTMLElement>(
+        'a[href], button, [role="button"], [tabindex]:not([tabindex="-1"])'
+      ) ?? null
+    )
+  }, [focusTarget, node])
   const { state, handlers } = useFloatingTooltip(
     () => {
       const element = node.current
       if (!tooltipEnabled || !element || label.length === 0) return false
       return Boolean(showWhen) || isTextClipped(element)
     },
-    { focusTarget, revalidateKey: tooltipEligible }
+    {
+      getFocusTarget: focusTarget === 'nearest-interactive' ? getFocusTarget : undefined,
+      revalidateKey: tooltipEligible,
+    }
   )
 
   return (

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

@@ -86,16 +86,16 @@ const HIDDEN_STATE: FloatingTooltipState = {
  * Drives a pointer-reactive floating tooltip. `canShow` is checked on each
  * gesture and while visible, allowing callers to dismiss the tooltip when its
  * eligibility changes. Returns the current state and stable pointer/focus
- * handlers; `focusTarget` may supply a separate keyboard-focus trigger.
+ * handlers; `getFocusTarget` may supply a separate keyboard-focus trigger.
  */
 export interface UseFloatingTooltipOptions {
   /**
    * Prefer placing the bubble above the cursor. Still flips below when the
    * pointer is too close to the top of the viewport.
    */
   preferAbove?: boolean
-  /** External control whose keyboard focus should reveal this tooltip. */
-  focusTarget?: HTMLElement | null
+  /** Resolves an external control whose keyboard focus should reveal this tooltip. */
+  getFocusTarget?: () => HTMLElement | null
   /** Semantic value whose changes should revalidate a visible tooltip. */
   revalidateKey?: unknown
 }
@@ -218,7 +218,7 @@ export function useFloatingTooltip(
   }, [apply, hide, showFromElement, showFromPointer])
 
   React.useEffect(() => {
-    const target = options.focusTarget
+    const target = options.getFocusTarget?.()
     if (!target) return undefined
     const show = () => {
       if (!canShowRef.current(target) || !isFocusVisible(target)) return
@@ -231,7 +231,7 @@ export function useFloatingTooltip(
       target.removeEventListener('focus', show)
       target.removeEventListener('blur', hide)
     }
-  }, [hide, options.focusTarget, showFromElement])
+  }, [hide, options.getFocusTarget, showFromElement])
 
   React.useEffect(() => {
     const trigger = triggerRef.current