improvement(tables): show a tooltip on truncated column headers (#6371)

* improvement(tables): show a tooltip on truncated column headers

* chore(tables): use absolute import for HeaderLabel

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { cn } from '@sim/emcn'
 import { ChevronDown } from '@sim/emcn/icons'
 import type { WorkflowGroup } from '@/lib/table'
+import { HeaderLabel } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 import { COL_WIDTH, SELECTION_TINT_BG } from '../constants'
 import type { ColumnSourceInfo, DisplayColumn } from '../types'
@@ -296,9 +297,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             blockIconInfo={sourceInfo?.blockIconInfo}
             blockMissing={blockMissing}
           />
-          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
-            {column.workflowGroupId ? column.headerLabel : column.name}
-          </span>
+          <HeaderLabel
+            label={column.workflowGroupId ? column.headerLabel : column.name}
+            className='ml-1.5 text-[var(--text-primary)] text-small'
+          />
         </div>
       ) : (
         <div className='flex h-full w-full min-w-0 items-center'>
@@ -314,9 +316,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               blockIconInfo={sourceInfo?.blockIconInfo}
               blockMissing={blockMissing}
             />
-            <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
-              {column.workflowGroupId ? column.headerLabel : column.name}
-            </span>
+            <HeaderLabel
+              label={column.workflowGroupId ? column.headerLabel : column.name}
+              className='ml-1.5 text-[var(--text-primary)] text-small'
+            />
           </button>
           <button
             type='button'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { memo } from 'react'
+import { cn, FloatingTooltip, isTextClipped, useFloatingTooltip } from '@sim/emcn'
+
+interface HeaderLabelProps {
+  label: string
+  className?: string
+}
+
+/**
+ * Column header text that clips with an ellipsis and reveals its full value in
+ * a floating tooltip — but only while actually clipped, since an untruncated
+ * header already says everything the tooltip would.
+ */
+export const HeaderLabel = memo(function HeaderLabel({ label, className }: HeaderLabelProps) {
+  const { state, handlers } = useFloatingTooltip(isTextClipped)
+
+  return (
+    <>
+      <span className={cn('min-w-0 truncate', className)} {...handlers}>
+        {label}
+      </span>
+      <FloatingTooltip label={label} state={state} />
+    </>
+  )
+})

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -27,6 +27,7 @@ import {
 } from '@sim/emcn/icons'
 import type { RunLimit, RunMode } from '@/lib/api/contracts/tables'
 import type { WorkflowGroupType } from '@/lib/table'
+import { HeaderLabel } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label'
 import { getEnrichment } from '@/enrichments/registry'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 import { SELECTION_TINT_BG } from '../constants'
@@ -439,7 +440,7 @@ export function WorkflowGroupMetaCell({
         ) : (
           <Workflow className='size-[12px] shrink-0 text-[var(--text-icon)]' />
         )}
-        <span className='min-w-0 truncate text-[var(--text-secondary)] text-xs'>{name}</span>
+        <HeaderLabel label={name} className='text-[var(--text-secondary)] text-xs' />
         {onRunColumn && (
           <DropdownMenu open={runMenuOpen} onOpenChange={setRunMenuOpen}>
             <DropdownMenuTrigger asChild>