Skip to content

Commit e004035

Browse files
waleedlatif1waleedlatif1
committed
improvement(ui): consolidate fade-only overflow
1 parent 0f3d5e5 commit e004035

43 files changed

Lines changed: 316 additions & 257 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.claude/rules/emcn-components.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
3232
- **`ChipDatePicker`** — chip-styled date field.
3333
- **`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.
3434
- **`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.
35-
- **`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.
35+
- **`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.
3636

3737
## Modal keyboard defaults
3838

‎.claude/rules/sim-styling.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,11 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
5252

5353
## Text Overflow
5454

55-
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.
55+
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.
5656

57-
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.
57+
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.
58+
59+
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.
5860

5961
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.
6062

@@ -92,7 +94,7 @@ Draw a line with a real `border-*` utility. Never hand-roll one as `shadow-[inse
9294

9395
### What className MAY carry
9496

95-
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.
97+
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.
9698

9799
### Form / chip-modal layout rhythm
98100

‎.cursor/rules/sim-styling.mdc‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,11 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
4646

4747
## Text Overflow
4848

49-
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.
49+
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.
5050

51-
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.
51+
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.
52+
53+
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.
5254

5355
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.
5456

@@ -70,7 +72,7 @@ Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text
7072

7173
### What className MAY carry
7274

73-
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.
75+
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.
7476

7577
### Form / chip-modal layout rhythm
7678

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
DropdownMenuTrigger,
2626
FloatingTooltip,
2727
OverflowText,
28+
overflowTextClipClass,
2829
overflowTextFadeClass,
2930
POPOVER_ANIMATION_CLASSES,
3031
Popover,
@@ -543,9 +544,11 @@ function BreadcrumbLocationPopover({
543544
<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' />
544545
</span>
545546
{rootBreadcrumb?.label && (
546-
<span className='shrink-0 truncate text-[var(--text-body)] text-sm'>
547-
{rootBreadcrumb.label}
548-
</span>
547+
<OverflowText
548+
label={rootBreadcrumb.label}
549+
className='flex-1 text-[var(--text-body)] text-sm'
550+
tooltipEnabled={false}
551+
/>
549552
)}
550553
</button>
551554
</PopoverAnchor>
@@ -703,10 +706,9 @@ const BreadcrumbLabel = memo(
703706
<span
704707
ref={ref}
705708
className={cn(
706-
'min-w-0 truncate text-[var(--text-body)]',
707-
isOverflowing && overflowTextFadeClass,
708-
isOverflowing &&
709-
'group-hover:[-webkit-mask-image:none] group-hover:[mask-image:none] group-focus-visible:[-webkit-mask-image:none] group-focus-visible:[mask-image:none]'
709+
overflowTextClipClass,
710+
'text-[var(--text-body)]',
711+
isOverflowing && overflowTextFadeClass
710712
)}
711713
>
712714
{label}

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

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
Folder,
1212
FolderPlus,
1313
Loader,
14-
OverflowText,
1514
Pencil,
1615
Plus,
1716
Trash,
@@ -1960,13 +1959,7 @@ export function Files() {
19601959
multiSelectValues={typeFilter}
19611960
onMultiSelectChange={setTypeFilter}
19621961
overlayLabel={typeDisplayLabel}
1963-
overlayContent={
1964-
<OverflowText
1965-
label={typeDisplayLabel}
1966-
className='block w-full text-[var(--text-primary)]'
1967-
tooltipEnabled={false}
1968-
/>
1969-
}
1962+
overlayContent={typeDisplayLabel}
19701963
showAllOption
19711964
allOptionLabel='All'
19721965
className='w-full'
@@ -1984,13 +1977,7 @@ export function Files() {
19841977
multiSelectValues={sizeFilter}
19851978
onMultiSelectChange={setSizeFilter}
19861979
overlayLabel={sizeDisplayLabel}
1987-
overlayContent={
1988-
<OverflowText
1989-
label={sizeDisplayLabel}
1990-
className='block w-full text-[var(--text-primary)]'
1991-
tooltipEnabled={false}
1992-
/>
1993-
}
1980+
overlayContent={sizeDisplayLabel}
19941981
showAllOption
19951982
allOptionLabel='All'
19961983
className='w-full'
@@ -2004,11 +1991,8 @@ export function Files() {
20041991
multiSelect
20051992
multiSelectValues={uploadedByFilter}
20061993
onMultiSelectChange={setUploadedByFilter}
2007-
overlayContent={
2008-
<span className='truncate text-[var(--text-primary)]'>
2009-
{uploadedByDisplayLabel}
2010-
</span>
2011-
}
1994+
overlayLabel={uploadedByDisplayLabel}
1995+
overlayContent={uploadedByDisplayLabel}
20121996
searchable
20131997
searchPlaceholder='Search members...'
20141998
showAllOption

‎apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
DropdownMenu,
88
DropdownMenuContent,
99
DropdownMenuItem,
10+
DropdownMenuItemLabel,
1011
DropdownMenuSearchInput,
1112
DropdownMenuSub,
1213
DropdownMenuSubContent,
@@ -387,15 +388,15 @@ export function ResourceFolderTreeItems({
387388
<DropdownMenuSub key={node.id}>
388389
<DropdownMenuSubTrigger>
389390
<Folder className='size-[14px]' />
390-
<span>{node.name}</span>
391+
<DropdownMenuItemLabel label={node.name} />
391392
</DropdownMenuSubTrigger>
392393
<DropdownMenuSubContent>
393394
{folderType && (
394395
<DropdownMenuItem
395396
onClick={() => onSelect({ type: folderType, id: node.id, title: node.name })}
396397
>
397398
<Folder className='size-[14px]' />
398-
<span>{node.name}</span>
399+
<DropdownMenuItemLabel label={node.name} />
399400
</DropdownMenuItem>
400401
)}
401402
<ResourceFolderTreeItems
@@ -535,7 +536,7 @@ export function ResourceMenuSections({
535536
return (
536537
<DropdownMenuItem key={type} onClick={() => onSelect(resourceFromItem(type, item))}>
537538
<Icon className='size-[14px]' />
538-
<span>{config.label}</span>
539+
<DropdownMenuItemLabel label={config.label} />
539540
</DropdownMenuItem>
540541
)
541542
}
@@ -544,7 +545,7 @@ export function ResourceMenuSections({
544545
<DropdownMenuSub key={type}>
545546
<DropdownMenuSubTrigger>
546547
<Icon className='size-[14px]' />
547-
<span>{config.label}</span>
548+
<DropdownMenuItemLabel label={config.label} />
548549
</DropdownMenuSubTrigger>
549550
<DropdownMenuSubContent className={subContentClassName}>
550551
{section ? (

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
'use client'
22

33
import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
4-
import {
5-
Badge,
6-
ChipCombobox,
7-
ChipConfirmModal,
8-
chipContentLabelClass,
9-
cn,
10-
OverflowText,
11-
} from '@sim/emcn'
4+
import { Badge, ChipCombobox, ChipConfirmModal, chipContentLabelClass, cn } from '@sim/emcn'
125
import {
136
ChevronDown,
147
ChevronUp,
@@ -754,13 +747,7 @@ export function Document({
754747
setSelectedChunks(new Set())
755748
}}
756749
overlayLabel={enabledDisplayLabel}
757-
overlayContent={
758-
<OverflowText
759-
label={enabledDisplayLabel}
760-
className='block w-full text-[var(--text-primary)]'
761-
tooltipEnabled={false}
762-
/>
763-
}
750+
overlayContent={enabledDisplayLabel}
764751
showAllOption
765752
allOptionLabel='All'
766753
className='w-full'

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

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1473,11 +1473,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
14731473
style={{ backgroundColor: selectedStatusColor, width: 8, height: 8 }}
14741474
/>
14751475
)}
1476-
<OverflowText
1477-
label={statusDisplayLabel}
1478-
className='block flex-1'
1479-
tooltipEnabled={false}
1480-
/>
1476+
<span className='min-w-0 flex-1'>{statusDisplayLabel}</span>
14811477
</span>
14821478
}
14831479
showAllOption
@@ -1500,11 +1496,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
15001496
{selectedWorkflow && (
15011497
<Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
15021498
)}
1503-
<OverflowText
1504-
label={workflowDisplayLabel}
1505-
className='block flex-1'
1506-
tooltipEnabled={false}
1507-
/>
1499+
<span className='min-w-0 flex-1'>{workflowDisplayLabel}</span>
15081500
</span>
15091501
}
15101502
searchable
@@ -1524,13 +1516,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
15241516
onMultiSelectChange={setFolderIds}
15251517
placeholder='All folders'
15261518
overlayLabel={folderDisplayLabel}
1527-
overlayContent={
1528-
<OverflowText
1529-
label={folderDisplayLabel}
1530-
className='block w-full text-[var(--text-primary)]'
1531-
tooltipEnabled={false}
1532-
/>
1533-
}
1519+
overlayContent={folderDisplayLabel}
15341520
searchable
15351521
searchPlaceholder='Search folders...'
15361522
showAllOption
@@ -1548,13 +1534,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
15481534
onMultiSelectChange={setTriggers}
15491535
placeholder='All triggers'
15501536
overlayLabel={triggerDisplayLabel}
1551-
overlayContent={
1552-
<OverflowText
1553-
label={triggerDisplayLabel}
1554-
className='block w-full text-[var(--text-primary)]'
1555-
tooltipEnabled={false}
1556-
/>
1557-
}
1537+
overlayContent={triggerDisplayLabel}
15581538
searchable
15591539
searchPlaceholder='Search triggers...'
15601540
showAllOption
@@ -1572,13 +1552,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
15721552
onChange={handleTimeRangeChange}
15731553
placeholder='All time'
15741554
overlayLabel={timeDisplayLabel}
1575-
overlayContent={
1576-
<OverflowText
1577-
label={timeDisplayLabel}
1578-
className='block w-full text-[var(--text-primary)]'
1579-
tooltipEnabled={false}
1580-
/>
1581-
}
1555+
overlayContent={timeDisplayLabel}
15821556
className='w-full'
15831557
maxHeight={320}
15841558
/>

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/columns-menu/columns-menu.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
DropdownMenu,
88
DropdownMenuContent,
99
DropdownMenuItem,
10+
DropdownMenuItemLabel,
1011
DropdownMenuTrigger,
1112
} from '@sim/emcn'
1213
import { Columns3, Eye, EyeOff } from '@sim/emcn/icons'
@@ -166,11 +167,10 @@ function ColumnToggleRow({ label, visible, partial, indented, onToggle }: Column
166167
)}
167168
/>
168169
</span>
169-
<span
170-
className={cn('min-w-0 flex-1 truncate text-left', !showing && 'text-[var(--text-muted)]')}
171-
>
172-
{label}
173-
</span>
170+
<DropdownMenuItemLabel
171+
label={label}
172+
className={cn('text-left', !showing && 'text-[var(--text-muted)]')}
173+
/>
174174
</DropdownMenuItem>
175175
)
176176
}

‎apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/views-menu/views-menu.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,11 @@ export const ViewsMenu = memo(function ViewsMenu({
119119
onMouseLeave={scheduleClose}
120120
className={cn(chipVariants(), 'max-w-[220px]')}
121121
>
122-
<span className={chipContentLabelClass}>{label}</span>
122+
<OverflowText
123+
label={label}
124+
className={cn('flex-1', chipContentLabelClass)}
125+
focusTarget='nearest-interactive'
126+
/>
123127
<ChipChevronDown />
124128
</button>
125129
</PopoverAnchor>

0 commit comments

Comments
 (0)