From e004035ed5625a5c696c5efc1ed619f553f375e1 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 28 Aug 2026 13:17:43 -0700
Subject: [PATCH] improvement(ui): consolidate fade-only overflow

---
 .claude/rules/emcn-components.md              |  2 +-
 .claude/rules/sim-styling.md                  |  8 +--
 .cursor/rules/sim-styling.mdc                 |  8 +--
 .../resource-header/resource-header.tsx       | 16 +++---
 .../workspace/[workspaceId]/files/files.tsx   | 24 ++-------
 .../add-resource-dropdown.tsx                 |  9 ++--
 .../knowledge/[id]/[documentId]/document.tsx  | 17 +------
 .../app/workspace/[workspaceId]/logs/logs.tsx | 36 ++-----------
 .../components/columns-menu/columns-menu.tsx  | 10 ++--
 .../components/views-menu/views-menu.tsx      |  6 ++-
 .../workspace/[workspaceId]/tables/tables.tsx | 18 ++-----
 .../output-select/output-select.tsx           | 10 +---
 .../preview-editor/preview-editor.tsx         | 51 ++++++++-----------
 .../components/block/block.tsx                | 28 ++++------
 .../w/components/preview/preview.tsx          |  9 ++--
 .../sidebar-footer/sidebar-footer.tsx         | 11 +++-
 .../workspace-header/workspace-header.tsx     | 12 ++++-
 .../ee/audit-logs/components/audit-logs.tsx   |  8 +--
 .../components/usage-monitoring.tsx           | 14 +----
 .../chip-date-picker/chip-date-picker.tsx     |  9 ++--
 .../chip-dropdown/chip-dropdown.test.tsx      |  8 +++
 .../chip-dropdown/chip-dropdown.tsx           | 37 ++++++++++----
 .../src/components/chip-modal/chip-modal.tsx  |  7 ++-
 .../chip-select/chip-select.dom.test.tsx      |  8 +++
 .../components/chip-select/chip-select.tsx    | 19 +++++--
 .../emcn/src/components/chip/chip-chrome.ts   |  5 +-
 packages/emcn/src/components/chip/chip.tsx    |  9 +++-
 .../collapsible-card/collapsible-card.tsx     | 19 +++++--
 .../components/combobox/combobox.dom.test.tsx |  9 +++-
 .../emcn/src/components/combobox/combobox.tsx | 12 ++---
 .../dropdown-menu/dropdown-menu.test.tsx      | 20 +++++++-
 .../dropdown-menu/dropdown-menu.tsx           | 29 ++++++++---
 packages/emcn/src/components/index.ts         |  3 ++
 .../overflow-text/overflow-text.test.tsx      | 31 ++++++++++-
 .../overflow-text/overflow-text.tsx           | 15 +++---
 .../src/components/tab-strip/tab-strip.tsx    |  8 +--
 .../emcn/src/components/toast/toast.test.tsx  |  1 +
 .../src/lib/overflow-span.tsx                 |  5 +-
 .../src/note/note-block-view.tsx              |  4 +-
 .../src/subflow/subflow-node-view.tsx         |  2 +-
 .../workflow-block/canvas-sentence-view.tsx   |  2 +-
 .../src/workflow-block/sub-block-row-view.tsx | 12 ++---
 .../workflow-block/workflow-block-view.tsx    |  2 +-
 43 files changed, 316 insertions(+), 257 deletions(-)

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index 2d5babc15df..f4a88a40314 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -32,7 +32,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
 - **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
-- **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, single-line clipping, the conditional 18px edge fade, and the full-value floating tooltip; consumers pass only layout/typography through `className`. Never combine the fade with `truncate`, which paints an ellipsis beneath the mask. Keep ordinary `truncate` for editable or mirrored input values, code/log/path content, dense or virtualized grids, and composite rows where masking the container would also fade icons or actions. Multiline copy uses an intentional `line-clamp-*` treatment instead. A non-editable `Combobox` visual overlay passes its plain value through `overlayLabel`; render its visible `OverflowText` as a constrained block with `tooltipEnabled={false}` so the interactive trigger owns the single accessible tooltip.
+- **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
 ## Modal keyboard defaults
 
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index 188fc2b1810..3fd18753f46 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -52,9 +52,11 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
 
 ## Text Overflow
 
-Use `OverflowText` from `@sim/emcn` for a constrained, single-line, read-only human label or title. It owns `min-w-0`, single-line clipping, the conditional edge fade, and the full-value floating tooltip; pass only layout and typography through `className`. Never combine a fade or hand-written `mask-image` with `truncate`, which leaves an ellipsis beneath the mask. Pass the full label to this component instead of shortening it in JavaScript first.
+Use `OverflowText` from `@sim/emcn` for a constrained, single-line, read-only human label or title. It owns `min-w-0`, fade-only clipping, the conditional edge mask, and the full-value floating tooltip; pass only layout and typography through `className`. Never combine a fade or hand-written `mask-image` with `truncate`/`text-ellipsis`, and never remove the mask on hover to reveal an ellipsis. Pass the full label instead of shortening it in JavaScript first. Components that must measure a label externally use the complete `overflowTextClipClass` + conditional `overflowTextFadeClass` pair.
 
-For a non-editable `Combobox` visual overlay, pass the same plain value as `overlayLabel` and render the visible `OverflowText` with `block w-full` (or `block flex-1` beside an icon) plus `tooltipEnabled={false}`. The transparent interactive layer then owns the one reachable full-value tooltip while the visual layer owns the measured fade.
+For a non-editable `Combobox` visual overlay, pass the same full plain value as `overlayLabel`. The combobox owns the visible overlay's fade and keeps the one reachable full-value tooltip on its interactive layer; consumers provide only the overlay's decorated content.
+
+Use `DropdownMenuItemLabel` for a human label beside menu icons, checks, shortcuts, or actions. Bare string children are wrapped automatically; a direct rich `<span>` is only a hard-clipped escape hatch and must not be used for an ordinary text label.
 
 Do not apply the fade universally to editable or mirrored input values, code, logs, paths, filenames that use intentional middle truncation, dense or virtualized grids, or a composite container that also holds icons/actions. Those keep their purpose-built overflow behavior. Multiline copy uses an intentional `line-clamp-*` treatment.
 
@@ -92,7 +94,7 @@ Draw a line with a real `border-*` utility. Never hand-roll one as `shadow-[inse
 
 ### What className MAY carry
 
-Layout/sizing ONLY: `flex-1`, `w-full`, `w-[Npx]`, `min-w-0`, `max-w-*`, margins, `truncate`. Example: `<ChipInput icon={Search} className='min-w-0 flex-1' .../>` (`app/workspace/[workspaceId]/integrations/integrations.tsx:257`). NEVER re-specify canonical chrome — the component already applies it.
+Layout/sizing ONLY: `flex-1`, `w-full`, `w-[Npx]`, `min-w-0`, `max-w-*`, margins. `truncate` is allowed only for the explicit overflow exceptions above, never as a general layout class. Example: `<ChipInput icon={Search} className='min-w-0 flex-1' .../>` (`app/workspace/[workspaceId]/integrations/integrations.tsx:257`). NEVER re-specify canonical chrome — the component already applies it.
 
 ### Form / chip-modal layout rhythm
 
diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc
index d79cc9fd04e..8b407a204b7 100644
--- a/.cursor/rules/sim-styling.mdc
+++ b/.cursor/rules/sim-styling.mdc
@@ -46,9 +46,11 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
 
 ## Text Overflow
 
-Use `OverflowText` from `@sim/emcn` for a constrained, single-line, read-only human label or title. It owns `min-w-0`, single-line clipping, the conditional edge fade, and the full-value floating tooltip; pass only layout and typography through `className`. Never combine a fade or hand-written `mask-image` with `truncate`, which leaves an ellipsis beneath the mask. Pass the full label to this component instead of shortening it in JavaScript first.
+Use `OverflowText` from `@sim/emcn` for a constrained, single-line, read-only human label or title. It owns `min-w-0`, fade-only clipping, the conditional edge mask, and the full-value floating tooltip; pass only layout and typography through `className`. Never combine a fade or hand-written `mask-image` with `truncate`/`text-ellipsis`, and never remove the mask on hover to reveal an ellipsis. Pass the full label instead of shortening it in JavaScript first. Components that must measure a label externally use the complete `overflowTextClipClass` + conditional `overflowTextFadeClass` pair.
 
-For a non-editable `Combobox` visual overlay, pass the same plain value as `overlayLabel` and render the visible `OverflowText` with `block w-full` (or `block flex-1` beside an icon) plus `tooltipEnabled={false}`. The transparent interactive layer then owns the one reachable full-value tooltip while the visual layer owns the measured fade.
+For a non-editable `Combobox` visual overlay, pass the same full plain value as `overlayLabel`. The combobox owns the visible overlay's fade and keeps the one reachable full-value tooltip on its interactive layer; consumers provide only the overlay's decorated content.
+
+Use `DropdownMenuItemLabel` for a human label beside menu icons, checks, shortcuts, or actions. Bare string children are wrapped automatically; a direct rich `<span>` is only a hard-clipped escape hatch and must not be used for an ordinary text label.
 
 Do not apply the fade universally to editable or mirrored input values, code, logs, paths, filenames that use intentional middle truncation, dense or virtualized grids, or a composite container that also holds icons/actions. Those keep their purpose-built overflow behavior. Multiline copy uses an intentional `line-clamp-*` treatment.
 
@@ -70,7 +72,7 @@ Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text
 
 ### What className MAY carry
 
-Layout/sizing ONLY: `flex-1`, `w-full`, `w-[Npx]`, `min-w-0`, `max-w-*`, margins, `truncate`. Example: `<ChipInput icon={Search} className='min-w-0 flex-1' .../>` (`app/workspace/[workspaceId]/integrations/integrations.tsx:257`). NEVER re-specify canonical chrome — the component already applies it.
+Layout/sizing ONLY: `flex-1`, `w-full`, `w-[Npx]`, `min-w-0`, `max-w-*`, margins. `truncate` is allowed only for the explicit overflow exceptions above, never as a general layout class. Example: `<ChipInput icon={Search} className='min-w-0 flex-1' .../>` (`app/workspace/[workspaceId]/integrations/integrations.tsx:257`). NEVER re-specify canonical chrome — the component already applies it.
 
 ### Form / chip-modal layout rhythm
 
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 5c94470b581..6424128e163 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -25,6 +25,7 @@ import {
   DropdownMenuTrigger,
   FloatingTooltip,
   OverflowText,
+  overflowTextClipClass,
   overflowTextFadeClass,
   POPOVER_ANIMATION_CLASSES,
   Popover,
@@ -543,9 +544,11 @@ function BreadcrumbLocationPopover({
               <ArrowUpLeft className='col-start-1 row-start-1 size-[16px] scale-[0.25] text-[var(--text-icon)] opacity-0 blur-[2px] transition-[opacity,filter,transform] duration-200 ease-in-out group-hover:scale-100 group-hover:opacity-100 group-hover:blur-0 group-focus-visible:scale-100 group-focus-visible:opacity-100 group-focus-visible:blur-0 motion-reduce:transition-none' />
             </span>
             {rootBreadcrumb?.label && (
-              <span className='shrink-0 truncate text-[var(--text-body)] text-sm'>
-                {rootBreadcrumb.label}
-              </span>
+              <OverflowText
+                label={rootBreadcrumb.label}
+                className='flex-1 text-[var(--text-body)] text-sm'
+                tooltipEnabled={false}
+              />
             )}
           </button>
         </PopoverAnchor>
@@ -703,10 +706,9 @@ const BreadcrumbLabel = memo(
       <span
         ref={ref}
         className={cn(
-          'min-w-0 truncate text-[var(--text-body)]',
-          isOverflowing && overflowTextFadeClass,
-          isOverflowing &&
-            'group-hover:[-webkit-mask-image:none] group-hover:[mask-image:none] group-focus-visible:[-webkit-mask-image:none] group-focus-visible:[mask-image:none]'
+          overflowTextClipClass,
+          'text-[var(--text-body)]',
+          isOverflowing && overflowTextFadeClass
         )}
       >
         {label}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index dc7d32ec991..73e9dd4710f 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -11,7 +11,6 @@ import {
   Folder,
   FolderPlus,
   Loader,
-  OverflowText,
   Pencil,
   Plus,
   Trash,
@@ -1960,13 +1959,7 @@ export function Files() {
             multiSelectValues={typeFilter}
             onMultiSelectChange={setTypeFilter}
             overlayLabel={typeDisplayLabel}
-            overlayContent={
-              <OverflowText
-                label={typeDisplayLabel}
-                className='block w-full text-[var(--text-primary)]'
-                tooltipEnabled={false}
-              />
-            }
+            overlayContent={typeDisplayLabel}
             showAllOption
             allOptionLabel='All'
             className='w-full'
@@ -1984,13 +1977,7 @@ export function Files() {
             multiSelectValues={sizeFilter}
             onMultiSelectChange={setSizeFilter}
             overlayLabel={sizeDisplayLabel}
-            overlayContent={
-              <OverflowText
-                label={sizeDisplayLabel}
-                className='block w-full text-[var(--text-primary)]'
-                tooltipEnabled={false}
-              />
-            }
+            overlayContent={sizeDisplayLabel}
             showAllOption
             allOptionLabel='All'
             className='w-full'
@@ -2004,11 +1991,8 @@ export function Files() {
               multiSelect
               multiSelectValues={uploadedByFilter}
               onMultiSelectChange={setUploadedByFilter}
-              overlayContent={
-                <span className='truncate text-[var(--text-primary)]'>
-                  {uploadedByDisplayLabel}
-                </span>
-              }
+              overlayLabel={uploadedByDisplayLabel}
+              overlayContent={uploadedByDisplayLabel}
               searchable
               searchPlaceholder='Search members...'
               showAllOption
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
index cf418d5818c..38bf0ac757a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
@@ -7,6 +7,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuSearchInput,
   DropdownMenuSub,
   DropdownMenuSubContent,
@@ -387,7 +388,7 @@ export function ResourceFolderTreeItems({
           <DropdownMenuSub key={node.id}>
             <DropdownMenuSubTrigger>
               <Folder className='size-[14px]' />
-              <span>{node.name}</span>
+              <DropdownMenuItemLabel label={node.name} />
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
               {folderType && (
@@ -395,7 +396,7 @@ export function ResourceFolderTreeItems({
                   onClick={() => onSelect({ type: folderType, id: node.id, title: node.name })}
                 >
                   <Folder className='size-[14px]' />
-                  <span>{node.name}</span>
+                  <DropdownMenuItemLabel label={node.name} />
                 </DropdownMenuItem>
               )}
               <ResourceFolderTreeItems
@@ -535,7 +536,7 @@ export function ResourceMenuSections({
           return (
             <DropdownMenuItem key={type} onClick={() => onSelect(resourceFromItem(type, item))}>
               <Icon className='size-[14px]' />
-              <span>{config.label}</span>
+              <DropdownMenuItemLabel label={config.label} />
             </DropdownMenuItem>
           )
         }
@@ -544,7 +545,7 @@ export function ResourceMenuSections({
           <DropdownMenuSub key={type}>
             <DropdownMenuSubTrigger>
               <Icon className='size-[14px]' />
-              <span>{config.label}</span>
+              <DropdownMenuItemLabel label={config.label} />
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent className={subContentClassName}>
               {section ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index e253143adf0..6978ecf4f94 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -1,14 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
-import {
-  Badge,
-  ChipCombobox,
-  ChipConfirmModal,
-  chipContentLabelClass,
-  cn,
-  OverflowText,
-} from '@sim/emcn'
+import { Badge, ChipCombobox, ChipConfirmModal, chipContentLabelClass, cn } from '@sim/emcn'
 import {
   ChevronDown,
   ChevronUp,
@@ -754,13 +747,7 @@ export function Document({
               setSelectedChunks(new Set())
             }}
             overlayLabel={enabledDisplayLabel}
-            overlayContent={
-              <OverflowText
-                label={enabledDisplayLabel}
-                className='block w-full text-[var(--text-primary)]'
-                tooltipEnabled={false}
-              />
-            }
+            overlayContent={enabledDisplayLabel}
             showAllOption
             allOptionLabel='All'
             className='w-full'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index 8be63a40c5c..5d1813df532 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -1473,11 +1473,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
                   style={{ backgroundColor: selectedStatusColor, width: 8, height: 8 }}
                 />
               )}
-              <OverflowText
-                label={statusDisplayLabel}
-                className='block flex-1'
-                tooltipEnabled={false}
-              />
+              <span className='min-w-0 flex-1'>{statusDisplayLabel}</span>
             </span>
           }
           showAllOption
@@ -1500,11 +1496,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
               {selectedWorkflow && (
                 <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
               )}
-              <OverflowText
-                label={workflowDisplayLabel}
-                className='block flex-1'
-                tooltipEnabled={false}
-              />
+              <span className='min-w-0 flex-1'>{workflowDisplayLabel}</span>
             </span>
           }
           searchable
@@ -1524,13 +1516,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           onMultiSelectChange={setFolderIds}
           placeholder='All folders'
           overlayLabel={folderDisplayLabel}
-          overlayContent={
-            <OverflowText
-              label={folderDisplayLabel}
-              className='block w-full text-[var(--text-primary)]'
-              tooltipEnabled={false}
-            />
-          }
+          overlayContent={folderDisplayLabel}
           searchable
           searchPlaceholder='Search folders...'
           showAllOption
@@ -1548,13 +1534,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           onMultiSelectChange={setTriggers}
           placeholder='All triggers'
           overlayLabel={triggerDisplayLabel}
-          overlayContent={
-            <OverflowText
-              label={triggerDisplayLabel}
-              className='block w-full text-[var(--text-primary)]'
-              tooltipEnabled={false}
-            />
-          }
+          overlayContent={triggerDisplayLabel}
           searchable
           searchPlaceholder='Search triggers...'
           showAllOption
@@ -1572,13 +1552,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
             onChange={handleTimeRangeChange}
             placeholder='All time'
             overlayLabel={timeDisplayLabel}
-            overlayContent={
-              <OverflowText
-                label={timeDisplayLabel}
-                className='block w-full text-[var(--text-primary)]'
-                tooltipEnabled={false}
-              />
-            }
+            overlayContent={timeDisplayLabel}
             className='w-full'
             maxHeight={320}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/columns-menu/columns-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/columns-menu/columns-menu.tsx
index a7bbb0f9f95..d157ea04665 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/columns-menu/columns-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/columns-menu/columns-menu.tsx
@@ -7,6 +7,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuTrigger,
 } from '@sim/emcn'
 import { Columns3, Eye, EyeOff } from '@sim/emcn/icons'
@@ -166,11 +167,10 @@ function ColumnToggleRow({ label, visible, partial, indented, onToggle }: Column
           )}
         />
       </span>
-      <span
-        className={cn('min-w-0 flex-1 truncate text-left', !showing && 'text-[var(--text-muted)]')}
-      >
-        {label}
-      </span>
+      <DropdownMenuItemLabel
+        label={label}
+        className={cn('text-left', !showing && 'text-[var(--text-muted)]')}
+      />
     </DropdownMenuItem>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx
index 8bb600b66d4..a0527fd593e 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx
@@ -119,7 +119,11 @@ export const ViewsMenu = memo(function ViewsMenu({
           onMouseLeave={scheduleClose}
           className={cn(chipVariants(), 'max-w-[220px]')}
         >
-          <span className={chipContentLabelClass}>{label}</span>
+          <OverflowText
+            label={label}
+            className={cn('flex-1', chipContentLabelClass)}
+            focusTarget='nearest-interactive'
+          />
           <ChipChevronDown />
         </button>
       </PopoverAnchor>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
index 3c30e8850d6..ec59b45f973 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ComboboxOption } from '@sim/emcn'
-import { ChipCombobox, ChipConfirmModal, OverflowText, Plus, toast, Upload } from '@sim/emcn'
+import { ChipCombobox, ChipConfirmModal, Plus, toast, Upload } from '@sim/emcn'
 import { Columns3, FolderPlus, Pencil, Rows3, Table as TableIcon, Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
@@ -693,13 +693,7 @@ export function Tables() {
             multiSelectValues={rowCountFilter}
             onMultiSelectChange={setRowCountFilter}
             overlayLabel={rowCountDisplayLabel}
-            overlayContent={
-              <OverflowText
-                label={rowCountDisplayLabel}
-                className='block w-full text-[var(--text-primary)]'
-                tooltipEnabled={false}
-              />
-            }
+            overlayContent={rowCountDisplayLabel}
             showAllOption
             allOptionLabel='All'
             className='w-full'
@@ -714,13 +708,7 @@ export function Tables() {
               multiSelectValues={ownerFilter}
               onMultiSelectChange={setOwnerFilter}
               overlayLabel={ownerDisplayLabel}
-              overlayContent={
-                <OverflowText
-                  label={ownerDisplayLabel}
-                  className='block w-full text-[var(--text-primary)]'
-                  tooltipEnabled={false}
-                />
-              }
+              overlayContent={ownerDisplayLabel}
               searchable
               searchPlaceholder='Search members...'
               showAllOption
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index ab8d0f9f7d1..27ff29ba633 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { ChipCombobox, Combobox, type ComboboxOptionGroup, cn, OverflowText } from '@sim/emcn'
+import { ChipCombobox, Combobox, type ComboboxOptionGroup, cn } from '@sim/emcn'
 import { useShallow } from 'zustand/react/shallow'
 import {
   type FlattenOutputsBlockInput,
@@ -270,13 +270,7 @@ export function OutputSelect({
       onMultiSelectChange={onOutputSelect}
       placeholder={selectedDisplayText}
       overlayLabel={selectedDisplayText}
-      overlayContent={
-        <OverflowText
-          label={selectedDisplayText}
-          className='block w-full text-[var(--text-primary)]'
-          tooltipEnabled={false}
-        />
-      }
+      overlayContent={selectedDisplayText}
       disabled={disabled || workflowOutputs.length === 0}
       align={align}
       maxHeight={maxHeight}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index a16ea864787..57cfcebffce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -11,6 +11,7 @@ import {
   handleKeyboardActivation,
   Input,
   Label,
+  OverflowText,
   Tooltip,
 } from '@sim/emcn'
 import {
@@ -375,14 +376,11 @@ function ConnectionsSection({
                 }}
               >
                 <BlockTile blockType={connection.blockType} size='sm' />
-                <span
-                  className={cn(
-                    'truncate',
-                    'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
-                  )}
-                >
-                  {connection.blockName}
-                </span>
+                <OverflowText
+                  label={connection.blockName}
+                  className='flex-1 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
+                  focusTarget={hasFields ? 'nearest-interactive' : undefined}
+                />
                 {hasFields && (
                   <ChevronDown
                     className={cn(
@@ -439,14 +437,11 @@ function ConnectionsSection({
               <div className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#8B5CF6]'>
                 <span className='text-[9px] text-white'>V</span>
               </div>
-              <span
-                className={cn(
-                  'truncate',
-                  'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
-                )}
-              >
-                Variables
-              </span>
+              <OverflowText
+                label='Variables'
+                className='flex-1 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
+                focusTarget='nearest-interactive'
+              />
               <ChevronDown
                 className={cn(
                   'size-[14px] flex-shrink-0 transition-transform duration-100',
@@ -491,14 +486,11 @@ function ConnectionsSection({
               <div className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#6B7280]'>
                 <span className='text-[9px] text-white'>E</span>
               </div>
-              <span
-                className={cn(
-                  'truncate',
-                  'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
-                )}
-              >
-                Secrets
-              </span>
+              <OverflowText
+                label='Secrets'
+                className='flex-1 text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
+                focusTarget='nearest-interactive'
+              />
               <ChevronDown
                 className={cn(
                   'size-[14px] flex-shrink-0 transition-transform duration-100',
@@ -1074,9 +1066,7 @@ function PreviewEditorContent({
         {/* Header - styled like subflow header */}
         <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
           <BlockTile blockType={block.type} size='lg' />
-          <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-sm'>
-            {subflowName}
-          </span>
+          <OverflowText label={subflowName} className='flex-1 text-[var(--text-primary)] text-sm' />
           {onClose && (
             <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
               <X className='size-[14px]' />
@@ -1160,9 +1150,10 @@ function PreviewEditorContent({
       {/* Header - styled like editor */}
       <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
         {block.type !== 'note' && <BlockTile blockType={block.type} size='lg' />}
-        <span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-sm'>
-          {block.name || blockConfig.name}
-        </span>
+        <OverflowText
+          label={block.name || blockConfig.name}
+          className='flex-1 text-[var(--text-primary)] text-sm'
+        />
         {onClose && (
           <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
             <X className='size-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index c43c5785941..cbe37394ec6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { type CSSProperties, memo, useMemo } from 'react'
+import { OverflowText } from '@sim/emcn'
 import {
   CanvasSentenceView,
   HANDLE_POSITIONS,
@@ -197,19 +198,12 @@ const SubBlockRow = memo(function SubBlockRow({
 
   return (
     <div className='flex h-5 items-center gap-2'>
-      <span
-        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
-        title={title}
-      >
-        {title}
-      </span>
+      <OverflowText label={title} className='text-[var(--text-tertiary)] text-sm capitalize' />
       {displayValue !== undefined && (
-        <span
-          className='flex-1 truncate text-right text-[var(--text-primary)] text-sm'
-          title={displayValue}
-        >
-          {displayValue}
-        </span>
+        <OverflowText
+          label={displayValue}
+          className='flex-1 text-right text-[var(--text-primary)] text-sm'
+        />
       )}
     </div>
   )
@@ -509,12 +503,10 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
       {/* Header - matches WorkflowBlock structure */}
       <div className='flex h-[40px] items-center justify-between px-2'>
         <div className='relative z-10 flex min-w-0 flex-1 items-center'>
-          <span
-            className={`truncate text-[17px] ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
-            title={canvasPresentation.title}
-          >
-            {humanizeBlockName(canvasPresentation.title)}
-          </span>
+          <OverflowText
+            label={humanizeBlockName(canvasPresentation.title)}
+            className={!enabled ? 'text-[17px] text-[var(--text-muted)]' : 'text-[17px]'}
+          />
         </div>
         {!isNoteBlock && (
           <WorkflowTypeTag
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index 4da385ed2a8..c562966f783 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, cn, Tooltip } from '@sim/emcn'
+import { Button, cn, OverflowText, Tooltip } from '@sim/emcn'
 import { ArrowLeft } from '@sim/emcn/icons'
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { PreviewEditor } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor'
@@ -308,9 +308,10 @@ export function Preview({
           </Tooltip.Root>
           {currentWorkflowName && (
             <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-sm'>
-              <span className='truncate text-[var(--text-secondary)] text-caption'>
-                {currentWorkflowName}
-              </span>
+              <OverflowText
+                label={currentWorkflowName}
+                className='text-[var(--text-secondary)] text-caption'
+              />
             </div>
           )}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
index 26006e7c398..e12d80206aa 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
@@ -11,8 +11,10 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  OverflowText,
   Skeleton,
 } from '@sim/emcn'
 import { BookOpen, Credit, Download, HelpCircle, Settings, Trash, Users } from '@sim/emcn/icons'
@@ -250,7 +252,12 @@ export function SidebarFooter({
           >
             {avatar}
             {profile ? (
-              <span className={cn('sidebar-collapse-hide', chipContentLabelClass)}>{name}</span>
+              <OverflowText
+                label={name}
+                className={cn('sidebar-collapse-hide flex-1', chipContentLabelClass)}
+                tooltipEnabled={!isCollapsed}
+                focusTarget='nearest-interactive'
+              />
             ) : (
               /* Fixed width — the chip hugs its content, so a flexible bar would collapse to nothing. */
               <Skeleton className='sidebar-collapse-hide h-[14px] w-[96px] rounded-sm' />
@@ -280,7 +287,7 @@ export function SidebarFooter({
                 }}
               >
                 <Icon className='size-[14px]' />
-                <span>{label}</span>
+                <DropdownMenuItemLabel label={label} />
               </SettingsIntentLink>
             </DropdownMenuItem>
           )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 0df126a2764..f56d901ab8b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -548,7 +548,11 @@ function WorkspaceHeaderImpl({
               )}
               {!isCollapsed && activeWorkspace?.name && (
                 <>
-                  <span className={chipContentLabelClass}>{activeWorkspace.name}</span>
+                  <OverflowText
+                    label={activeWorkspace.name}
+                    className={cn('flex-1', chipContentLabelClass)}
+                    focusTarget='nearest-interactive'
+                  />
                   <ChipChevronDown />
                 </>
               )}
@@ -888,7 +892,11 @@ function WorkspaceHeaderImpl({
           )}
           {!isCollapsed && activeWorkspace?.name && (
             <>
-              <span className={chipContentLabelClass}>{activeWorkspace.name}</span>
+              <OverflowText
+                label={activeWorkspace.name}
+                className={cn('flex-1', chipContentLabelClass)}
+                focusTarget='nearest-interactive'
+              />
               <ChipChevronDown />
             </>
           )}
diff --git a/apps/sim/ee/audit-logs/components/audit-logs.tsx b/apps/sim/ee/audit-logs/components/audit-logs.tsx
index 2c8f1c8993b..a15849a95fc 100644
--- a/apps/sim/ee/audit-logs/components/audit-logs.tsx
+++ b/apps/sim/ee/audit-logs/components/audit-logs.tsx
@@ -538,13 +538,7 @@ export function AuditLogs({ organizationId }: AuditLogsProps) {
             onChange={handleTimeRangeChange}
             placeholder='All time'
             overlayLabel={timeDisplayLabel}
-            overlayContent={
-              <OverflowText
-                label={timeDisplayLabel}
-                className='block w-full text-[var(--text-primary)]'
-                tooltipEnabled={false}
-              />
-            }
+            overlayContent={timeDisplayLabel}
             maxHeight={320}
             align='start'
           />
diff --git a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
index 6a060b66d4b..9b8cd104b53 100644
--- a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
@@ -6,7 +6,6 @@ import {
   Calendar,
   ChipCombobox,
   ChipModalTabs,
-  OverflowText,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -419,19 +418,8 @@ export function UsageMonitoring({
               options={PERIOD_OPTIONS}
               value={preset}
               onChange={handlePeriodChange}
-              /*
-              The visible layer is masked, so the interactive layer owns the one
-              reachable tooltip — a custom range's label truncates, and without
-              `overlayLabel` its full value was unreadable.
-            */
               overlayLabel={periodLabel}
-              overlayContent={
-                <OverflowText
-                  label={periodLabel}
-                  className='block w-full text-[var(--text-primary)]'
-                  tooltipEnabled={false}
-                />
-              }
+              overlayContent={periodLabel}
               align='end'
             />
             <Popover
diff --git a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
index 44baf6d5a1c..e946977e77a 100644
--- a/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
+++ b/packages/emcn/src/components/chip-date-picker/chip-date-picker.tsx
@@ -7,6 +7,7 @@ import { cn } from '../../lib/cn'
 import { Calendar, formatDateLabel, formatDateRangeLabel } from '../calendar/calendar'
 import { chipVariants, TRIGGER_BORDER_CLASS } from '../chip/chip'
 import { chipContentLabelClass, chipIconSlotClass } from '../chip/chip-chrome'
+import { OverflowText } from '../overflow-text/overflow-text'
 import { POPOVER_ANIMATION_CLASSES } from '../popover/popover-animation'
 
 interface ChipDatePickerBaseProps {
@@ -110,15 +111,15 @@ const ChipDatePicker = forwardRef<HTMLButtonElement, ChipDatePickerProps>(
               className
             )}
           >
-            <span
+            <OverflowText
+              label={triggerText || placeholder}
               className={cn(
                 chipContentLabelClass,
                 'flex-1',
                 !triggerText && 'text-[var(--text-muted)]'
               )}
-            >
-              {triggerText || placeholder}
-            </span>
+              focusTarget='nearest-interactive'
+            />
             {variant === 'filled' && (
               <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
                 <ChevronDown className='size-[14px]' />
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx
index e6a916f868e..0e9ace53aba 100644
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx
+++ b/packages/emcn/src/components/chip-dropdown/chip-dropdown.test.tsx
@@ -45,4 +45,12 @@ describe('ChipDropdown', () => {
   it('keeps its intrinsic width by default', () => {
     expect(mount(false).className).not.toContain('w-full')
   })
+
+  it('renders its text trigger through the fade-only overflow primitive', () => {
+    const label = mount(true).querySelector<HTMLElement>('[data-overflow-text]')
+
+    expect(label?.textContent).toBe('Workflow')
+    expect(label?.className).toContain('text-clip')
+    expect(label?.className).not.toContain('truncate')
+  })
 })
diff --git a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
index 304219845f7..16ab7f0fbf9 100644
--- a/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
+++ b/packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx
@@ -17,10 +17,12 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuSearchInput,
   DropdownMenuTrigger,
 } from '../dropdown-menu/dropdown-menu'
 import { InsideModalContext } from '../modal/modal'
+import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
 type ChipIcon = ComponentType<{ className?: string }>
 
@@ -251,10 +253,25 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
      * container is sized to max-content, so `flex-grow` has no leftover space to
      * consume and the layout collapses to the natural `gap-2` between items.
      */
-    const labelClass = cn(
-      'min-w-0 flex-1 truncate text-sm',
-      !isInverse && 'text-[var(--text-body)]'
+    const labelClass = cn('flex-1 text-sm', !isInverse && 'text-[var(--text-body)]')
+
+    const triggerLabelClass = cn(
+      labelClass,
+      isPlaceholder && !isInverse && 'text-[var(--text-muted)]'
     )
+    const renderLabel = (label: ReactNode) => {
+      const textLabel =
+        typeof label === 'string' || typeof label === 'number' ? String(label) : null
+      return textLabel == null ? (
+        <span className={cn(overflowTextClipClass, triggerLabelClass)}>{label}</span>
+      ) : (
+        <OverflowText
+          label={textLabel}
+          className={triggerLabelClass}
+          focusTarget='nearest-interactive'
+        />
+      )
+    }
 
     const renderItem = (option: ChipDropdownOption) => {
       const isSelected = selectedValues.includes(option.value)
@@ -276,7 +293,11 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
           }}
         >
           {option.iconElement ?? (OptionIcon ? <OptionIcon /> : null)}
-          <span>{option.label}</span>
+          {typeof option.label === 'string' || typeof option.label === 'number' ? (
+            <DropdownMenuItemLabel label={String(option.label)} />
+          ) : (
+            <span className={cn(overflowTextClipClass, 'flex-1')}>{option.label}</span>
+          )}
           {showSelectedCheck && isSelected ? <Check className='!ml-auto !size-[16px]' /> : null}
         </DropdownMenuItem>
       )
@@ -310,11 +331,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
             )}
           >
             {LeftIcon ? <LeftIcon className={iconClass} /> : null}
-            <span
-              className={cn(labelClass, isPlaceholder && !isInverse && 'text-[var(--text-muted)]')}
-            >
-              {displayLabel}
-            </span>
+            {renderLabel(displayLabel)}
             <span aria-hidden className={chevronSlotClass}>
               <ChevronDown className='size-[14px]' />
             </span>
@@ -345,7 +362,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
                 if (isMultiple) props.onChange?.([])
               }}
             >
-              <span>{allLabel}</span>
+              <DropdownMenuItemLabel label={allLabel} />
               {selectedValues.length === 0 ? <Check className='!ml-auto !size-[16px]' /> : null}
             </DropdownMenuItem>
           )}
diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx
index e0e640af35b..2809994057a 100644
--- a/packages/emcn/src/components/chip-modal/chip-modal.tsx
+++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx
@@ -53,6 +53,7 @@ import { ChipTextarea } from '../chip-textarea/chip-textarea'
 import { Label } from '../label/label'
 import { focusFirstTextInputIn, isElementVisible } from '../modal/auto-focus'
 import { Modal, ModalContent, useModalDismissDisabled } from '../modal/modal'
+import { OverflowText } from '../overflow-text/overflow-text'
 import { Tooltip } from '../tooltip/tooltip'
 
 /**
@@ -302,7 +303,11 @@ const ChipModalHeader = React.forwardRef<HTMLDivElement, ChipModalHeaderProps>(
         <div className='flex min-w-0 items-center justify-between gap-2 px-4 pt-3'>
           <div className='flex min-w-0 items-center gap-2'>
             {Icon ? <Icon className={chipContentIconClass} /> : null}
-            <span className={chipContentLabelClass}>{children}</span>
+            {typeof children === 'string' || typeof children === 'number' ? (
+              <OverflowText label={String(children)} className={chipContentLabelClass} />
+            ) : (
+              <span className={chipContentLabelClass}>{children}</span>
+            )}
           </div>
           <Button
             type='button'
diff --git a/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx b/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx
index e55d7033595..c150a8c050e 100644
--- a/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.dom.test.tsx
@@ -49,4 +49,12 @@ describe('ChipSelect', () => {
     expect(trigger.getAttribute('aria-invalid')).toBe('true')
     expect(trigger.getAttribute('aria-describedby')).toBe('workflow-error')
   })
+
+  it('renders its text trigger through the fade-only overflow primitive', () => {
+    const label = mount().querySelector<HTMLElement>('[data-overflow-text]')
+
+    expect(label?.textContent).toBe('Select...')
+    expect(label?.className).toContain('text-clip')
+    expect(label?.className).not.toContain('truncate')
+  })
 })
diff --git a/packages/emcn/src/components/chip-select/chip-select.tsx b/packages/emcn/src/components/chip-select/chip-select.tsx
index 494813a70d1..739960e7c5f 100644
--- a/packages/emcn/src/components/chip-select/chip-select.tsx
+++ b/packages/emcn/src/components/chip-select/chip-select.tsx
@@ -10,10 +10,12 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuLabel,
   DropdownMenuSearchInput,
   DropdownMenuTrigger,
 } from '../dropdown-menu/dropdown-menu'
+import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
 /** A selectable option in a {@link ChipSelect}. */
 export interface ChipSelectOption {
@@ -191,6 +193,7 @@ export function ChipSelect({
   }, [searchable, query, sections])
 
   const hasResults = filteredSections.some((g) => g.items.length > 0)
+  const visibleLabel = displayLabel ?? triggerLabel
 
   const toggleValue = (val: string) => {
     if (selectedValues.includes(val)) {
@@ -241,7 +244,7 @@ export function ChipSelect({
         onSelect={() => onChange?.(opt.value)}
       >
         {Icon ? <Icon /> : null}
-        <span>{opt.label}</span>
+        <DropdownMenuItemLabel label={opt.label} />
       </DropdownMenuItem>
     )
   }
@@ -268,9 +271,17 @@ export function ChipSelect({
             className
           )}
         >
-          <span className='min-w-0 truncate text-[var(--text-body)]'>
-            {displayLabel ?? triggerLabel}
-          </span>
+          {typeof visibleLabel === 'string' || typeof visibleLabel === 'number' ? (
+            <OverflowText
+              label={String(visibleLabel)}
+              className='flex-1 text-[var(--text-body)]'
+              focusTarget='nearest-interactive'
+            />
+          ) : (
+            <span className={cn(overflowTextClipClass, 'flex-1 text-[var(--text-body)]')}>
+              {visibleLabel}
+            </span>
+          )}
           <span aria-hidden className={cn(chipIconSlotClass, 'text-[var(--text-icon)]')}>
             <ChevronDown className='size-[14px]' />
           </span>
diff --git a/packages/emcn/src/components/chip/chip-chrome.ts b/packages/emcn/src/components/chip/chip-chrome.ts
index f15f351fbdd..c0ed45f02e6 100644
--- a/packages/emcn/src/components/chip/chip-chrome.ts
+++ b/packages/emcn/src/components/chip/chip-chrome.ts
@@ -57,8 +57,9 @@ export const chipContentGap = 'gap-1.5'
 export const chipGeometryClass = `h-[30px] items-center ${chipContentGap} rounded-lg px-2 text-left text-sm`
 /** Chip-content icon (non-inverse): 16px, non-shrinking, `--text-icon`. Inverse chip variants override the color to `currentColor`. */
 export const chipContentIconClass = 'size-[16px] flex-shrink-0 text-[var(--text-icon)]'
-/** Chip-content label (non-inverse): truncating `--text-body` at `text-sm`. Inverse chip variants override the color to `currentColor`. */
-export const chipContentLabelClass = 'min-w-0 truncate text-[var(--text-body)] text-sm'
+/** Fade-free single-line fallback for rich chip content. Plain text labels should render through `OverflowText`. */
+export const chipContentLabelClass =
+  'min-w-0 overflow-hidden text-clip whitespace-nowrap text-[var(--text-body)] text-sm'
 
 /**
  * The two row surfaces. Mutually exclusive — a row paints one OR the other,
diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx
index a52b3740e1e..1063e1822c2 100644
--- a/packages/emcn/src/components/chip/chip.tsx
+++ b/packages/emcn/src/components/chip/chip.tsx
@@ -10,6 +10,7 @@ import {
 import { cva, type VariantProps } from 'class-variance-authority'
 import Link, { type LinkProps } from 'next/link'
 import { cn } from '../../lib/cn'
+import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 import {
   chipActiveSurfaceClass,
   chipContentIconClass,
@@ -114,11 +115,15 @@ function ChipContent({
   const isInverse = variant === 'primary' || variant === 'destructive'
   const iconClass = cn(chipContentIconClass, isInverse && 'text-current')
   const labelClass = cn(chipContentLabelClass, 'flex-1', isInverse && 'text-current')
+  const textLabel =
+    typeof children === 'string' || typeof children === 'number' ? String(children) : null
   return (
     <>
       {leftAdornment ?? (LeftIcon ? <LeftIcon className={iconClass} /> : null)}
-      {children != null && children !== false ? (
-        <span className={labelClass}>{children}</span>
+      {textLabel != null ? (
+        <OverflowText label={textLabel} className={labelClass} focusTarget='nearest-interactive' />
+      ) : children != null && children !== false ? (
+        <span className={cn(overflowTextClipClass, labelClass)}>{children}</span>
       ) : null}
       {RightIcon ? <RightIcon className={iconClass} /> : null}
     </>
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
index 8629675bf01..661bab113c9 100644
--- a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
@@ -3,9 +3,10 @@
 import type * as React from 'react'
 import { cn } from '../../lib/cn'
 import { handleKeyboardActivation } from '../../lib/keyboard'
+import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
 export interface CollapsibleCardProps {
-  /** Header label (rendered in the standard truncated field-title style). */
+  /** Header label rendered with the standard fade-only overflow treatment. */
   title: React.ReactNode
   /** Optional trailing header content, e.g. a type `Badge`. */
   badge?: React.ReactNode
@@ -18,7 +19,7 @@ export interface CollapsibleCardProps {
 
 /**
  * A collapsible field card: a `--surface-4` header (click / keyboard to toggle)
- * with a truncated title + optional badge, over a `--surface-2` body. Shared by
+ * with a fade-clipped title + optional badge, over a `--surface-2` body. Shared by
  * the workflow input-mapping rows and the enrichment output-column config.
  */
 export function CollapsibleCard({
@@ -45,7 +46,19 @@ export function CollapsibleCard({
         onKeyDown={(event) => handleKeyboardActivation(event, onToggleCollapse)}
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
-          <span className='block truncate text-[var(--text-tertiary)] text-sm'>{title}</span>
+          {typeof title === 'string' || typeof title === 'number' ? (
+            <OverflowText
+              label={String(title)}
+              className='flex-1 text-[var(--text-tertiary)] text-sm'
+              focusTarget='nearest-interactive'
+            />
+          ) : (
+            <span
+              className={cn(overflowTextClipClass, 'flex-1 text-[var(--text-tertiary)] text-sm')}
+            >
+              {title}
+            </span>
+          )}
           {badge}
         </div>
       </div>
diff --git a/packages/emcn/src/components/combobox/combobox.dom.test.tsx b/packages/emcn/src/components/combobox/combobox.dom.test.tsx
index ac9d87b9114..84a68376a3b 100644
--- a/packages/emcn/src/components/combobox/combobox.dom.test.tsx
+++ b/packages/emcn/src/components/combobox/combobox.dom.test.tsx
@@ -66,8 +66,13 @@ describe('Combobox onOpenChange', () => {
       />
     )
 
-    const overflowLabel = trigger().querySelector('[data-overflow-text]')
-    expect(overflowLabel?.textContent).toBe('2 selected')
+    const overflowLabels = trigger().querySelectorAll<HTMLElement>('[data-overflow-text]')
+    expect(overflowLabels).toHaveLength(2)
+    expect([...overflowLabels].map(({ textContent }) => textContent)).toEqual([
+      '2 selected',
+      '2 selected',
+    ])
+    expect([...overflowLabels].every(({ className }) => !className.includes('truncate'))).toBe(true)
   })
 
   it('reports the open a trigger click causes', () => {
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx
index a2298f187b9..196adff522a 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -638,6 +638,8 @@ const Combobox = memo(
       }, [effectiveHighlightedIndex])
 
       const SelectedIcon = selectedOption?.icon
+      const visualLabel =
+        overlayLabel ?? multiSelectLabel ?? (selectedOption ? selectedOption.label : placeholder)
 
       return (
         <Popover open={open} onOpenChange={changeOpen}>
@@ -722,11 +724,7 @@ const Combobox = memo(
                     onKeyDown={handleKeyDown}
                   >
                     <OverflowText
-                      label={
-                        overlayLabel ??
-                        multiSelectLabel ??
-                        (selectedOption ? selectedOption.label : placeholder)
-                      }
+                      label={visualLabel}
                       className={cn(
                         'flex-1',
                         !selectedOption && !multiSelectLabel && 'text-[var(--text-muted)]',
@@ -741,7 +739,9 @@ const Combobox = memo(
                     />
                     {overlayContent && (
                       <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-2'>
-                        <div className='w-full truncate'>{overlayContent}</div>
+                        <OverflowText label={visualLabel} className='w-full' tooltipEnabled={false}>
+                          {overlayContent}
+                        </OverflowText>
                       </div>
                     )}
                   </div>
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.test.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.test.tsx
index f683ddf5141..94145633802 100644
--- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.test.tsx
+++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.test.tsx
@@ -16,6 +16,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuTrigger,
 } from './dropdown-menu'
 
@@ -102,7 +103,7 @@ describe('menu row labels', () => {
     expect(link.querySelector('span')).toBeNull()
   })
 
-  it('leaves a label the consumer already wrapped as a single box', () => {
+  it('hard-clips a consumer-provided rich span without adding an ellipsis', () => {
     openMenu(
       <DropdownMenuItem>
         <span>Add 2 rows to Chat</span>
@@ -110,6 +111,21 @@ describe('menu row labels', () => {
     )
 
     expect(row().querySelectorAll('span')).toHaveLength(1)
-    expect(row().className).toContain('[&>span:not([data-overflow-text])]:truncate')
+    expect(row().className).toContain('[&>span:not([data-overflow-text])]:text-clip')
+    expect(row().className).not.toContain('truncate')
+  })
+
+  it('uses the canonical fade-only label beside an icon', () => {
+    openMenu(
+      <DropdownMenuItem>
+        <svg aria-hidden />
+        <DropdownMenuItemLabel label='A long workflow label' />
+      </DropdownMenuItem>
+    )
+
+    const label = row().querySelector<HTMLElement>('[data-overflow-text]')
+    expect(label?.textContent).toBe('A long workflow label')
+    expect(label?.className).toContain('text-clip')
+    expect(label?.className).not.toContain('truncate')
   })
 })
diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
index 0198bda51c5..f5bd88c565e 100644
--- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx
@@ -26,7 +26,7 @@ import { Check, ChevronRight, Circle, Search } from '../../icons'
 import { cn } from '../../lib/cn'
 import { chipContentGap, chipFieldSurfaceClass } from '../chip/chip-chrome'
 import { InsideModalContext } from '../modal/modal'
-import { OverflowText } from '../overflow-text/overflow-text'
+import { OverflowText, type OverflowTextProps } from '../overflow-text/overflow-text'
 
 const 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'
@@ -81,13 +81,29 @@ const MENU_ROW_SELECTED_CLASS =
  * {@link withOverflowLabel}.
  */
 const MENU_ROW_SINGLE_LINE_CLASS =
-  'whitespace-nowrap [&>span]:min-w-0 [&>span:not([data-overflow-text])]:truncate'
+  'whitespace-nowrap [&>span]:min-w-0 [&>span:not([data-overflow-text])]:overflow-hidden [&>span:not([data-overflow-text])]:text-clip'
+
+export type DropdownMenuItemLabelProps = Omit<OverflowTextProps, 'focusTarget'>
+
+/** Canonical fade-only label for a menu row with icons, checks, or actions. */
+const DropdownMenuItemLabel = React.memo(function DropdownMenuItemLabel({
+  className,
+  ...props
+}: DropdownMenuItemLabelProps) {
+  return (
+    <OverflowText
+      {...props}
+      className={cn('flex-1', className)}
+      focusTarget='nearest-interactive'
+    />
+  )
+})
 
 /**
  * Wraps a row's bare text children in a truncating box so a label wider than
  * the menu uses the platform overflow treatment rather than being cut mid-word
- * at the surface edge. Consumer-provided direct `<span>` labels retain an
- * ellipsis fallback; a canonical {@link OverflowText} owns its fade and tooltip.
+ * at the surface edge. Consumer-provided rich spans get a fade-free hard clip;
+ * human labels with adjacent icons/actions use {@link DropdownMenuItemLabel}.
  *
  * Adjacent text is coalesced into a single box: a row is a flex container, so
  * wrapping `Insert row {n}` as two boxes would make them two flex items and
@@ -100,9 +116,9 @@ function withOverflowLabel(children: React.ReactNode): React.ReactNode {
   const flushText = () => {
     if (text.length === 0) return
     rebuilt.push(
-      <OverflowText key={`label-${rebuilt.length}`} label={text.join('')}>
+      <DropdownMenuItemLabel key={`label-${rebuilt.length}`} label={text.join('')}>
         {text}
-      </OverflowText>
+      </DropdownMenuItemLabel>
     )
     text = []
   }
@@ -531,6 +547,7 @@ export {
   DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuItemLabel,
   DropdownMenuItemAction,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioItem,
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index f0830e272ad..736dce6dd56 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -113,6 +113,8 @@ export {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuItemAction,
+  DropdownMenuItemLabel,
+  type DropdownMenuItemLabelProps,
   DropdownMenuLabel,
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
@@ -166,6 +168,7 @@ export {
 export {
   OverflowText,
   type OverflowTextProps,
+  overflowTextClipClass,
   overflowTextFadeClass,
 } from './overflow-text/overflow-text'
 export {
diff --git a/packages/emcn/src/components/overflow-text/overflow-text.test.tsx b/packages/emcn/src/components/overflow-text/overflow-text.test.tsx
index d057c1019ab..294797f9356 100644
--- a/packages/emcn/src/components/overflow-text/overflow-text.test.tsx
+++ b/packages/emcn/src/components/overflow-text/overflow-text.test.tsx
@@ -4,7 +4,8 @@
 import { act, StrictMode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { OverflowText } from './overflow-text'
+import { cn } from '../../lib/cn'
+import { OverflowText, overflowTextFadeClass } from './overflow-text'
 
 let host: HTMLDivElement
 let root: Root
@@ -75,6 +76,13 @@ function setWidths(element: HTMLElement, clientWidth: number, scrollWidth: numbe
 }
 
 describe('OverflowText', () => {
+  it('makes the shared fade treatment override an accidental ellipsis', () => {
+    const className = cn('truncate', overflowTextFadeClass)
+
+    expect(className).toContain('text-clip')
+    expect(className).not.toContain('truncate')
+  })
+
   it('fades and reveals the full value only when clipped', () => {
     act(() =>
       root.render(<OverflowText label='A long workflow name' className='truncate text-sm' />)
@@ -159,6 +167,27 @@ describe('OverflowText', () => {
     )
   })
 
+  it('opens from a focused menu item that uses roving tabindex', () => {
+    act(() =>
+      root.render(
+        <div role='menuitem' tabIndex={-1}>
+          <OverflowText label='A long menu label' focusTarget='nearest-interactive' />
+        </div>
+      )
+    )
+    const item = host.querySelector<HTMLElement>('[role="menuitem"]')
+    const label = host.querySelector<HTMLElement>('[data-overflow-text]')
+    if (!item || !label) throw new Error('Menu label did not render')
+
+    setWidths(label, 80, 180)
+    vi.spyOn(item, 'matches').mockReturnValue(true)
+    act(() => item.focus())
+
+    expect(document.querySelector('[data-native-surface-overlay]')?.textContent).toBe(
+      'A long menu label'
+    )
+  })
+
   it('keeps decorated visible content out of the plain tooltip label', () => {
     act(() =>
       root.render(
diff --git a/packages/emcn/src/components/overflow-text/overflow-text.tsx b/packages/emcn/src/components/overflow-text/overflow-text.tsx
index f845d49dc23..cf9b6dc7b7e 100644
--- a/packages/emcn/src/components/overflow-text/overflow-text.tsx
+++ b/packages/emcn/src/components/overflow-text/overflow-text.tsx
@@ -10,9 +10,12 @@ import {
   useIsOverflowing,
 } from '../tooltip/tooltip'
 
-/** Shared 18px trailing fade for measured special cases such as breadcrumb groups. */
+/** Complete fade-only clipping treatment for measured special cases. */
 export const overflowTextFadeClass =
-  '[-webkit-mask-image:linear-gradient(to_right,black_calc(100%_-_18px),transparent)] [mask-image:linear-gradient(to_right,black_calc(100%_-_18px),transparent)]'
+  'overflow-hidden text-clip whitespace-nowrap [-webkit-mask-image:linear-gradient(to_right,black_calc(100%_-_18px),transparent)] [mask-image:linear-gradient(to_right,black_calc(100%_-_18px),transparent)]'
+
+/** Fade-free clipping for externally measured labels and rich-content overflow exceptions. */
+export const overflowTextClipClass = 'block min-w-0 overflow-hidden text-clip whitespace-nowrap'
 
 export interface OverflowTextProps {
   /** Full text shown in the tooltip and used as the default visible content. */
@@ -51,7 +54,7 @@ export const OverflowText = memo(function OverflowText({
     if (focusTarget !== 'nearest-interactive') return null
     return (
       node.current?.closest<HTMLElement>(
-        'a[href], button, [role="button"], [tabindex]:not([tabindex="-1"])'
+        'a[href], button, [role="button"], [role^="menuitem"], [tabindex]:not([tabindex="-1"])'
       ) ?? null
     )
   }, [focusTarget, node])
@@ -72,11 +75,7 @@ export const OverflowText = memo(function OverflowText({
       <span
         ref={textRef}
         data-overflow-text=''
-        className={cn(
-          className,
-          'block min-w-0 overflow-hidden text-clip whitespace-nowrap',
-          isOverflowing && overflowTextFadeClass
-        )}
+        className={cn(className, overflowTextClipClass, isOverflowing && overflowTextFadeClass)}
         {...handlers}
       >
         {children ?? label}
diff --git a/packages/emcn/src/components/tab-strip/tab-strip.tsx b/packages/emcn/src/components/tab-strip/tab-strip.tsx
index 8ede2a176f6..2cb12802028 100644
--- a/packages/emcn/src/components/tab-strip/tab-strip.tsx
+++ b/packages/emcn/src/components/tab-strip/tab-strip.tsx
@@ -17,7 +17,7 @@ import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
 import { Plus, X } from '../../icons'
 import { cn } from '../../lib/cn'
 import { Button } from '../button/button'
-import { overflowTextFadeClass } from '../overflow-text/overflow-text'
+import { overflowTextClipClass, overflowTextFadeClass } from '../overflow-text/overflow-text'
 import { Tooltip } from '../tooltip/tooltip'
 
 const DRAG_EDGE_ZONE = 40
@@ -445,9 +445,9 @@ const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
               <span
                 ref={titleRef}
                 className={cn(
-                  'min-w-0 flex-1 select-none truncate text-left',
-                  titleTruncated && overflowTextFadeClass,
-                  titleTruncated && 'hover:[-webkit-mask-image:none] hover:[mask-image:none]'
+                  overflowTextClipClass,
+                  'flex-1 select-none text-left',
+                  titleTruncated && overflowTextFadeClass
                 )}
               >
                 {tab.title}
diff --git a/packages/emcn/src/components/toast/toast.test.tsx b/packages/emcn/src/components/toast/toast.test.tsx
index 71420296b30..9458e336978 100644
--- a/packages/emcn/src/components/toast/toast.test.tsx
+++ b/packages/emcn/src/components/toast/toast.test.tsx
@@ -30,6 +30,7 @@ beforeEach(() => {
     class {
       disconnect(): void {}
       observe(): void {}
+      unobserve(): void {}
     }
   )
 })
diff --git a/packages/workflow-renderer/src/lib/overflow-span.tsx b/packages/workflow-renderer/src/lib/overflow-span.tsx
index 608b10b3434..d56a47211b7 100644
--- a/packages/workflow-renderer/src/lib/overflow-span.tsx
+++ b/packages/workflow-renderer/src/lib/overflow-span.tsx
@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react'
-import { OverflowText } from '@sim/emcn'
+import { cn, OverflowText } from '@sim/emcn'
 import type { CodePreview } from '../types'
 import { CodeHoverCard } from './code-hover-card'
 
 interface OverflowSpanProps {
   value: string
+  /** Layout and typography only; the renderer owns its overflow treatment. */
   className: string
   /** Rich content shown instead of the plain value when this is clipped code. */
   codePreview?: CodePreview
@@ -26,7 +27,7 @@ interface OverflowSpanProps {
 export function OverflowSpan({ value, className, codePreview, children }: OverflowSpanProps) {
   if (codePreview) {
     return (
-      <CodeHoverCard preview={codePreview} className={className}>
+      <CodeHoverCard preview={codePreview} className={cn('truncate', className)}>
         {children ?? value}
       </CodeHoverCard>
     )
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index f5a7cb0926b..43f45cca2c0 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -1033,14 +1033,14 @@ export function NoteBlockView({
                     !isEnabled && 'opacity-50'
                   )}
                 >
-                  <OverflowSpan value={name ?? ''} className='truncate text-[17px] text-current'>
+                  <OverflowSpan value={name ?? ''} className='text-[17px] text-current'>
                     {renderMarkedName(name ?? '', nameSearchRange)}
                   </OverflowSpan>
                 </button>
               ) : (
                 <OverflowSpan
                   value={name ?? ''}
-                  className={cn('truncate text-[17px] text-current', !isEnabled && 'opacity-50')}
+                  className={cn('text-[17px] text-current', !isEnabled && 'opacity-50')}
                 >
                   {renderMarkedName(name ?? '', nameSearchRange)}
                 </OverflowSpan>
diff --git a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
index 2b407055cf4..1635c9da746 100644
--- a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
+++ b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx
@@ -618,7 +618,7 @@ export function SubflowNodeView({
           >
             <OverflowSpan
               value={blockName}
-              className={cn('truncate text-[17px]', !isEnabled && 'text-[var(--text-muted)]')}
+              className={cn('text-[17px]', !isEnabled && 'text-[var(--text-muted)]')}
             />
           </div>
           <div className='relative z-10 flex flex-shrink-0 items-center gap-1'>
diff --git a/packages/workflow-renderer/src/workflow-block/canvas-sentence-view.tsx b/packages/workflow-renderer/src/workflow-block/canvas-sentence-view.tsx
index c1ee95881d1..3d00d41211d 100644
--- a/packages/workflow-renderer/src/workflow-block/canvas-sentence-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/canvas-sentence-view.tsx
@@ -55,7 +55,7 @@ export function CanvasSentenceView({ segments, renderChip }: CanvasSentenceViewP
         const value = renderChip(segment.subBlockId)
         const placeholder = segment.noun ? (
           <InlineChip muted>
-            <OverflowSpan value={segment.noun} className='min-w-0 truncate' />
+            <OverflowSpan value={segment.noun} className='min-w-0' />
           </InlineChip>
         ) : null
         const chip = value || placeholder
diff --git a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
index 112fd8eccae..a1b901b6aa1 100644
--- a/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/sub-block-row-view.tsx
@@ -58,7 +58,7 @@ export function SubBlockRowView({
       <InlineChip>
         <OverflowSpan
           value={displayValue ?? title}
-          className={cn('min-w-0 truncate', isMonospace && 'font-mono')}
+          className={cn('min-w-0', isMonospace && 'font-mono')}
           codePreview={codePreview}
         />
       </InlineChip>
@@ -70,7 +70,7 @@ export function SubBlockRowView({
       <OverflowSpan
         value={displayValue ?? title}
         className={cn(
-          'min-w-0 truncate text-sm',
+          'min-w-0 text-sm',
           variant === 'statement-primary'
             ? 'font-medium text-[var(--text-primary)]'
             : 'text-[var(--text-muted)]'
@@ -86,7 +86,7 @@ export function SubBlockRowView({
         <OverflowSpan
           value={displayValue ?? '-'}
           className={cn(
-            'min-w-0 flex-1 truncate text-left text-[var(--text-primary)] text-sm',
+            'min-w-0 flex-1 text-left text-[var(--text-primary)] text-sm',
             isMonospace && 'font-mono'
           )}
         />
@@ -99,7 +99,7 @@ export function SubBlockRowView({
       <div className='flex items-center'>
         <OverflowSpan
           value={title}
-          className='min-w-0 truncate text-[var(--text-muted)] text-sm capitalize'
+          className='min-w-0 text-[var(--text-muted)] text-sm capitalize'
         />
       </div>
     )
@@ -109,13 +109,13 @@ export function SubBlockRowView({
     <div className='flex h-5 items-center gap-2'>
       <OverflowSpan
         value={title}
-        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
+        className='min-w-0 text-[var(--text-tertiary)] text-sm capitalize'
       />
       {displayValue !== undefined && (
         <OverflowSpan
           value={displayValue}
           className={cn(
-            'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
+            'flex-1 text-right text-[var(--text-primary)] text-sm',
             isMonospace && 'font-mono'
           )}
         />
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
index 87e53e5964b..ea54bae5346 100644
--- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
+++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -950,7 +950,7 @@ export function WorkflowBlockView({
             <OverflowSpan
               value={humanizeBlockName(name)}
               className={cn(
-                'truncate text-[17px]',
+                'text-[17px]',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
             />