refactor(emcn,resource-header): address PR #4844 review feedback

- useIsOverflowing now uses a callback ref so the ResizeObserver follows the
  element across mount/unmount/reassignment instead of capturing it once at mount.
  Safe for conditionally rendered consumers of the shared hook. (greptile P2)
- Move POPOVER_ANIMATION_CLASSES out of chip-date-picker implementation internals
  into emcn/components/popover/popover-animation.ts, exported from the
  @/components/emcn barrel. Consumers now import from the module boundary.
  (greptile P2)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type React from 'react'
-import { memo, useRef } from 'react'
+import { memo } from 'react'
 import { cn } from '@/lib/core/utils/cn'
 import {
   FloatingTooltip,
@@ -30,10 +30,9 @@ export const FloatingOverflowText = memo(function FloatingOverflowText({
   className,
   showWhen,
 }: FloatingOverflowTextProps) {
-  const textRef = useRef<HTMLSpanElement>(null)
-  const isOverflowing = useIsOverflowing(textRef)
+  const { ref: textRef, node, isOverflowing } = useIsOverflowing<HTMLSpanElement>()
   const { state, handlers } = useFloatingTooltip(() => {
-    const element = textRef.current
+    const element = node.current
     if (!element || label.length === 0) return false
     return Boolean(showWhen) || isTextClipped(element)
   })

apps/sim/app/workspace/[workspaceId]/components/resource/components/floating-tooltip.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, type RefObject, useEffect, useMemo, useRef, useState } from 'react'
+import { memo, type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -136,30 +136,52 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
 }
 
 /**
- * Tracks whether a referenced element's text is horizontally clipped, staying in
- * sync via a `ResizeObserver` and window resizes.
+ * Tracks whether an element's text is horizontally clipped, re-measuring via a
+ * `ResizeObserver` and window resizes.
+ *
+ * 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).
  */
-export function useIsOverflowing(ref: RefObject<HTMLElement | null>): boolean {
+export function useIsOverflowing<T extends HTMLElement = HTMLElement>(): {
+  ref: (node: T | null) => void
+  node: RefObject<T | null>
+  isOverflowing: boolean
+} {
   const [isOverflowing, setIsOverflowing] = useState(false)
+  const nodeRef = useRef<T | null>(null)
+  const observerRef = useRef<ResizeObserver | null>(null)
 
-  useEffect(() => {
-    const element = ref.current
-    if (!element) return
-
-    const update = () => setIsOverflowing(isTextClipped(element))
-    update()
+  const measure = useCallback(() => {
+    const element = nodeRef.current
+    if (element) setIsOverflowing(isTextClipped(element))
+  }, [])
 
-    const resizeObserver = new ResizeObserver(update)
-    resizeObserver.observe(element)
-    window.addEventListener('resize', update)
+  const ref = useCallback(
+    (node: T | null) => {
+      observerRef.current?.disconnect()
+      observerRef.current = null
+      nodeRef.current = node
+      if (!node) return
+
+      measure()
+      const observer = new ResizeObserver(measure)
+      observer.observe(node)
+      observerRef.current = observer
+    },
+    [measure]
+  )
 
+  useEffect(() => {
+    window.addEventListener('resize', measure)
     return () => {
-      resizeObserver.disconnect()
-      window.removeEventListener('resize', update)
+      window.removeEventListener('resize', measure)
+      observerRef.current?.disconnect()
     }
-  }, [ref])
+  }, [measure])
 
-  return isOverflowing
+  return { ref, node: nodeRef, isOverflowing }
 }
 
 /** Whether an element's content is wider than its visible box. */

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

@@ -10,13 +10,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   Plus,
+  POPOVER_ANIMATION_CLASSES,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverItem,
   PopoverSection,
 } from '@/components/emcn'
-import { POPOVER_ANIMATION_CLASSES } from '@/components/emcn/components/chip-date-picker/chip-date-picker'
 import { cn } from '@/lib/core/utils/cn'
 import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
@@ -259,10 +259,9 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
   editing,
   className,
 }: BreadcrumbSegmentProps) {
-  const labelRef = useRef<HTMLSpanElement>(null)
-  const isOverflowing = useIsOverflowing(labelRef)
+  const { ref: labelRef, node: labelNode, isOverflowing } = useIsOverflowing<HTMLSpanElement>()
   const { state: tooltipState, handlers: tooltipHandlers } = useFloatingTooltip((target) =>
-    isBreadcrumbTextClipped(labelRef.current, target)
+    isBreadcrumbTextClipped(labelNode.current, target)
   )
 
   if (editing?.isEditing) {

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx

@@ -11,10 +11,10 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   ListFilter,
+  POPOVER_ANIMATION_CLASSES,
   Search,
   X,
 } from '@/components/emcn'
-import { POPOVER_ANIMATION_CLASSES } from '@/components/emcn/components/chip-date-picker/chip-date-picker'
 import { cn } from '@/lib/core/utils/cn'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
 

apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx

@@ -4,12 +4,10 @@ import { forwardRef, useState } from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { Calendar, formatDateLabel } from '@/components/emcn/components/calendar/calendar'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '@/components/emcn/components/chip/chip'
+import { POPOVER_ANIMATION_CLASSES } from '@/components/emcn/components/popover/popover-animation'
 import { ChevronDown } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
-export const POPOVER_ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
-
 export interface ChipDatePickerProps {
   /** Selected date as a `YYYY-MM-DD` string. */
   value?: string

apps/sim/components/emcn/components/index.ts

@@ -136,6 +136,7 @@ export {
   PopoverTrigger,
   usePopoverContext,
 } from './popover/popover'
+export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
 export {
   SModal,
   SModalClose,

apps/sim/components/emcn/components/popover/popover-animation.ts

@@ -0,0 +1,8 @@
+/**
+ * Radix popover open/close animation classes — fade + zoom + directional slide,
+ * with `motion-reduce` opt-out. Shared across emcn popover-style surfaces
+ * (`Popover`, `ChipDatePicker`, and consumers that build their own popover
+ * content). Apply alongside a surface's own layout/background classes.
+ */
+export const POPOVER_ANIMATION_CLASSES =
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'