fix(canvas): raw tooltip shows up when hovering block params (#5589)

* fix(canvas): replace native title tooltip with styled overflow tooltip on block params

Hovering a truncated subblock value or block name on the canvas popped
the browser's raw native tooltip with the full untruncated content
(including raw code). Replace the `title` attribute with the
cursor-following styled Tooltip, shown only when the text is actually
clipped.

* fix(canvas): drop unused ResizeObserver in OverflowSpan

useFloatingTooltip's canShow already receives the hovered element, so
measuring overflow via useIsOverflowing was redundant — every canvas
row was paying for a ResizeObserver and resize listener it never used.

Author: waleedlatif1

packages/workflow-renderer/src/lib/overflow-span.tsx

@@ -0,0 +1,25 @@
+import { FloatingTooltip, isTextClipped, useFloatingTooltip } from '@sim/emcn'
+
+interface OverflowSpanProps {
+  value: string
+  className: string
+}
+
+/**
+ * Truncated span that reveals its full value in a floating tooltip when — and
+ * only when — the text is actually clipped. Never use a native `title`
+ * attribute here: on the canvas it pops the browser's raw, unstyled tooltip
+ * with the full untruncated value (including raw code/JSON) over the graph.
+ */
+export function OverflowSpan({ value, className }: OverflowSpanProps) {
+  const { state, handlers } = useFloatingTooltip(isTextClipped)
+
+  return (
+    <>
+      <span className={className} {...handlers}>
+        {value}
+      </span>
+      <FloatingTooltip label={value} state={state} />
+    </>
+  )
+}

packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@sim/emcn'
+import { OverflowSpan } from '../lib/overflow-span'
 
 /**
  * Props for the pure subblock summary row. The container resolves the value —
@@ -22,22 +23,18 @@ export interface SubBlockRowViewProps {
 export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRowViewProps) {
   return (
     <div className='flex items-center gap-2'>
-      <span
+      <OverflowSpan
+        value={title}
         className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
-        title={title}
-      >
-        {title}
-      </span>
+      />
       {displayValue !== undefined && (
-        <span
+        <OverflowSpan
+          value={displayValue}
           className={cn(
             'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
             isMonospace && 'font-mono'
           )}
-          title={displayValue}
-        >
-          {displayValue}
-        </span>
+        />
       )}
     </div>
   )

packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx

@@ -2,6 +2,7 @@ import type { ComponentType, ReactNode, Ref } from 'react'
 import { Badge, cn, handleKeyboardActivation, Tooltip } from '@sim/emcn'
 import { Handle, Position } from 'reactflow'
 import { HANDLE_POSITIONS } from '../dimensions'
+import { OverflowSpan } from '../lib/overflow-span'
 import { tileIconColorClass } from '../lib/tile-icon-color'
 import type { BlockRunStatus } from '../types'
 import { SubBlockRowView } from './sub-block-row-view'
@@ -212,15 +213,13 @@ export function WorkflowBlockView({
                 )}
               />
             </div>
-            <span
+            <OverflowSpan
+              value={name}
               className={cn(
                 'truncate font-medium text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
-              title={name}
-            >
-              {name}
-            </span>
+            />
           </div>
           <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
             {isWorkflowSelector &&