fix(ui): preserve overflow text interactions

Author: waleedlatif1

.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.
+- **`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.
 
 ## Modal keyboard defaults
 

.claude/rules/sim-styling.md

@@ -54,6 +54,8 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
 
 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.
 
+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.
+
 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.
 
 ## Font Weight

.cursor/rules/sim-styling.mdc

@@ -48,6 +48,8 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
 
 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.
 
+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.
+
 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.
 
 ## Color Tokens

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -1969,8 +1969,13 @@ export function Files() {
             multiSelect
             multiSelectValues={typeFilter}
             onMultiSelectChange={setTypeFilter}
+            overlayLabel={typeDisplayLabel}
             overlayContent={
-              <OverflowText label={typeDisplayLabel} className='text-[var(--text-primary)]' />
+              <OverflowText
+                label={typeDisplayLabel}
+                className='block w-full text-[var(--text-primary)]'
+                tooltipEnabled={false}
+              />
             }
             showAllOption
             allOptionLabel='All'
@@ -1988,8 +1993,13 @@ export function Files() {
             multiSelect
             multiSelectValues={sizeFilter}
             onMultiSelectChange={setSizeFilter}
+            overlayLabel={sizeDisplayLabel}
             overlayContent={
-              <OverflowText label={sizeDisplayLabel} className='text-[var(--text-primary)]' />
+              <OverflowText
+                label={sizeDisplayLabel}
+                className='block w-full text-[var(--text-primary)]'
+                tooltipEnabled={false}
+              />
             }
             showAllOption
             allOptionLabel='All'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -753,8 +753,13 @@ export function Document({
               setEnabledFilter(values)
               setSelectedChunks(new Set())
             }}
+            overlayLabel={enabledDisplayLabel}
             overlayContent={
-              <OverflowText label={enabledDisplayLabel} className='text-[var(--text-primary)]' />
+              <OverflowText
+                label={enabledDisplayLabel}
+                className='block w-full text-[var(--text-primary)]'
+                tooltipEnabled={false}
+              />
             }
             showAllOption
             allOptionLabel='All'

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -1464,15 +1464,20 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           multiSelectValues={selectedStatuses}
           onMultiSelectChange={handleStatusChange}
           placeholder='All statuses'
+          overlayLabel={statusDisplayLabel}
           overlayContent={
-            <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
+            <span className='flex w-full min-w-0 items-center gap-1.5 text-[var(--text-primary)]'>
               {selectedStatusColor && (
                 <div
                   className='flex-shrink-0 rounded-[3px]'
                   style={{ backgroundColor: selectedStatusColor, width: 8, height: 8 }}
                 />
               )}
-              <OverflowText label={statusDisplayLabel} />
+              <OverflowText
+                label={statusDisplayLabel}
+                className='block flex-1'
+                tooltipEnabled={false}
+              />
             </span>
           }
           showAllOption
@@ -1489,12 +1494,17 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           multiSelectValues={workflowIds}
           onMultiSelectChange={setWorkflowIds}
           placeholder='All workflows'
+          overlayLabel={workflowDisplayLabel}
           overlayContent={
-            <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
+            <span className='flex w-full min-w-0 items-center gap-1.5 text-[var(--text-primary)]'>
               {selectedWorkflow && (
                 <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
               )}
-              <OverflowText label={workflowDisplayLabel} />
+              <OverflowText
+                label={workflowDisplayLabel}
+                className='block flex-1'
+                tooltipEnabled={false}
+              />
             </span>
           }
           searchable
@@ -1513,8 +1523,13 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           multiSelectValues={folderIds}
           onMultiSelectChange={setFolderIds}
           placeholder='All folders'
+          overlayLabel={folderDisplayLabel}
           overlayContent={
-            <OverflowText label={folderDisplayLabel} className='text-[var(--text-primary)]' />
+            <OverflowText
+              label={folderDisplayLabel}
+              className='block w-full text-[var(--text-primary)]'
+              tooltipEnabled={false}
+            />
           }
           searchable
           searchPlaceholder='Search folders...'
@@ -1532,8 +1547,13 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           multiSelectValues={triggers}
           onMultiSelectChange={setTriggers}
           placeholder='All triggers'
+          overlayLabel={triggerDisplayLabel}
           overlayContent={
-            <OverflowText label={triggerDisplayLabel} className='text-[var(--text-primary)]' />
+            <OverflowText
+              label={triggerDisplayLabel}
+              className='block w-full text-[var(--text-primary)]'
+              tooltipEnabled={false}
+            />
           }
           searchable
           searchPlaceholder='Search triggers...'
@@ -1551,8 +1571,13 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
             value={timeRange}
             onChange={handleTimeRangeChange}
             placeholder='All time'
+            overlayLabel={timeDisplayLabel}
             overlayContent={
-              <OverflowText label={timeDisplayLabel} className='text-[var(--text-primary)]' />
+              <OverflowText
+                label={timeDisplayLabel}
+                className='block w-full text-[var(--text-primary)]'
+                tooltipEnabled={false}
+              />
             }
             className='w-full'
             maxHeight={320}

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

@@ -64,7 +64,7 @@ interface SettingsResourceRowProps {
    */
   badge?: ReactNode
   /**
-   * Makes the whole row activatable via a stretched overlay button. `trailing`
+   * Makes the whole row activatable via a control with a stretched hit area. `trailing`
    * stacks above it, so interactive trailing controls (menus, chips) keep
    * working — never nest an interactive `trailing` inside a caller-supplied
    * wrapper `<button>`, which is invalid HTML.
@@ -156,7 +156,7 @@ export function SettingsResourceRow({
           {icon}
         </div>
       )}
-      <div className='flex min-w-0 flex-col justify-center gap-[1px] text-left'>
+      <div className='relative z-10 flex min-w-0 flex-col justify-center gap-[1px] text-left'>
         {typeof title === 'string' ? (
           <OverflowText label={title} className='text-[var(--text-body)] text-sm' />
         ) : (
@@ -186,7 +186,7 @@ export function SettingsResourceRow({
   // Decoration and the chevron stay click-through so the row's right edge never
   // becomes a dead zone; only `trailing` takes pointer events back.
   const end = hasEnd ? (
-    <div className='pointer-events-none relative flex flex-shrink-0 items-center gap-2'>
+    <div className='pointer-events-none relative z-20 flex flex-shrink-0 items-center gap-2'>
       {badge}
       {trailing != null && <div className='pointer-events-auto flex items-center'>{trailing}</div>}
       {navigable && <ArrowRight className={RESOURCE_ROW_ARROW_CLASSES} />}
@@ -210,14 +210,13 @@ export function SettingsResourceRow({
     )
   }
 
-  // The ring renders on the stretched overlay, which is inset-0 over the row — so a
-  // keyboard focus outline traces the visible row even though the control is empty.
-  const overlayClass =
-    'absolute inset-0 cursor-pointer rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
+  const controlClass = cn(
+    clusterClass,
+    'min-w-0 flex-1 cursor-pointer focus-visible:outline-none',
+    'after:absolute after:inset-0 after:rounded-lg after:content-[""]',
+    'focus-visible:after:ring-2 focus-visible:after:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)]'
+  )
 
-  // The hit area is a stretched overlay rather than a wrapper around the cluster:
-  // it lets the hover band span the full row (matching every hand-rolled settings
-  // list) while `trailing` — which may hold its own buttons — stacks above it.
   return (
     <div
       className={cn(
@@ -230,18 +229,21 @@ export function SettingsResourceRow({
           href={href}
           aria-label={clickLabel}
           aria-describedby={description != null ? describedById : undefined}
-          className={overlayClass}
-        />
+          className={controlClass}
+        >
+          {cluster}
+        </Link>
       ) : (
         <button
           type='button'
           onClick={onClick}
           aria-label={clickLabel}
           aria-describedby={description != null ? describedById : undefined}
-          className={overlayClass}
-        />
+          className={controlClass}
+        >
+          {cluster}
+        </button>
       )}
-      <div className={cn(clusterClass, 'pointer-events-none')}>{cluster}</div>
       {end}
     </div>
   )

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -764,7 +764,9 @@ export function WorkflowSidebarBody({
               <ArrowLeft className='size-[14px]' />
             </Button>
           )}
-          <OverflowText label={title} className='text-[var(--text-primary)] text-small' />
+          <h2 className='flex min-w-0'>
+            <OverflowText label={title} className='text-[var(--text-primary)] text-small' />
+          </h2>
         </div>
         <Button
           variant='ghost'

apps/sim/app/workspace/[workspaceId]/tables/tables.tsx

@@ -692,8 +692,13 @@ export function Tables() {
             multiSelect
             multiSelectValues={rowCountFilter}
             onMultiSelectChange={setRowCountFilter}
+            overlayLabel={rowCountDisplayLabel}
             overlayContent={
-              <OverflowText label={rowCountDisplayLabel} className='text-[var(--text-primary)]' />
+              <OverflowText
+                label={rowCountDisplayLabel}
+                className='block w-full text-[var(--text-primary)]'
+                tooltipEnabled={false}
+              />
             }
             showAllOption
             allOptionLabel='All'
@@ -708,8 +713,13 @@ export function Tables() {
               multiSelect
               multiSelectValues={ownerFilter}
               onMultiSelectChange={setOwnerFilter}
+              overlayLabel={ownerDisplayLabel}
               overlayContent={
-                <OverflowText label={ownerDisplayLabel} className='text-[var(--text-primary)]' />
+                <OverflowText
+                  label={ownerDisplayLabel}
+                  className='block w-full text-[var(--text-primary)]'
+                  tooltipEnabled={false}
+                />
               }
               searchable
               searchPlaceholder='Search members...'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx

@@ -269,8 +269,13 @@ export function OutputSelect({
       multiSelectValues={normalizedSelectedValues}
       onMultiSelectChange={onOutputSelect}
       placeholder={selectedDisplayText}
+      overlayLabel={selectedDisplayText}
       overlayContent={
-        <OverflowText label={selectedDisplayText} className='text-[var(--text-primary)]' />
+        <OverflowText
+          label={selectedDisplayText}
+          className='block w-full text-[var(--text-primary)]'
+          tooltipEnabled={false}
+        />
       }
       disabled={disabled || workflowOutputs.length === 0}
       align={align}