Skip to content

Commit 5c29d83

Browse files
waleedlatif1waleedlatif1
authored
improvement(ui): drop full-content hover tooltips (#6128)
* improvement(ui): drop full-content hover tooltips - remove the chunk-content tooltip in the KB chunks table (it forced the full chunk body on every truncated row) - remove the sub-block value tooltip on collapsed workflow blocks (whole prompts/code/JSON on hover) - replace the native `title` on subflow and note blocks with the clip-gated OverflowSpan - clip-gate the KB documents tags cell so it stops firing on fully visible tags - drop the dead tooltip on the resource header root title, which can never truncate * fix(workflow-renderer): default the optional note name for OverflowSpan
1 parent ed23330 commit 5c29d83

6 files changed

Lines changed: 55 additions & 58 deletions

File tree

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import { ArrowUpLeft } from 'lucide-react'
3333
import { createPortal } from 'react-dom'
3434
import { TITLE_BAR_LANE_PT } from '@/components/page-header-bar'
3535
import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
36-
import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
3736

3837
export interface DropdownOption {
3938
label: string
@@ -195,10 +194,9 @@ export const ResourceHeader = memo(function ResourceHeader({
195194
<span className={cn(chipGeometryClass, 'inline-flex shrink-0 cursor-default')}>
196195
{TitleIcon && <TitleIcon className={chipContentIconClass} />}
197196
{titleLabel && (
198-
<FloatingOverflowText
199-
label={titleLabel}
200-
className='block whitespace-nowrap text-[var(--text-body)] text-sm'
201-
/>
197+
<span className='block whitespace-nowrap text-[var(--text-body)] text-sm'>
198+
{titleLabel}
199+
</span>
202200
)}
203201
</span>
204202
)}

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

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,7 @@ import type {
2121
SelectableConfig,
2222
SortConfig,
2323
} from '@/app/workspace/[workspaceId]/components'
24-
import {
25-
EMPTY_CELL_PLACEHOLDER,
26-
FloatingOverflowText,
27-
Resource,
28-
} from '@/app/workspace/[workspaceId]/components'
24+
import { EMPTY_CELL_PLACEHOLDER, Resource } from '@/app/workspace/[workspaceId]/components'
2925
import {
3026
ChunkContextMenu,
3127
ChunkEditor,
@@ -948,13 +944,9 @@ export function Document({
948944
cells: {
949945
content: {
950946
content: (
951-
<FloatingOverflowText
952-
label={chunk.content}
953-
showWhen={previewContent !== chunk.content}
954-
className='block truncate text-[var(--text-primary)] text-sm'
955-
>
947+
<span className='block truncate text-[var(--text-primary)] text-sm'>
956948
<SearchHighlight text={previewContent} searchQuery={searchQuery} />
957-
</FloatingOverflowText>
949+
</span>
958950
),
959951
},
960952
index: {

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

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@ import {
1818
chipContentLabelClass,
1919
chipVariants,
2020
cn,
21+
FloatingTooltip,
22+
isTextClipped,
2123
Loader,
2224
Tooltip,
2325
Trash,
26+
useFloatingTooltip,
2427
} from '@sim/emcn'
2528
import { Database, DatabaseX } from '@sim/emcn/icons'
2629
import { createLogger } from '@sim/logger'
@@ -177,6 +180,39 @@ interface TagValue {
177180
value: string
178181
}
179182

183+
/**
184+
* Tags cell for the documents table. Shows the joined tag values inline and
185+
* reveals the full `name: value` breakdown only when the inline text is
186+
* actually clipped — an un-truncated cell already says everything the tooltip
187+
* would.
188+
*/
189+
function DocumentTagsCell({ tags }: { tags: TagValue[] }) {
190+
const { state, handlers } = useFloatingTooltip(isTextClipped)
191+
192+
return (
193+
<>
194+
<span
195+
role='presentation'
196+
className='block max-w-full truncate text-[var(--text-secondary)] text-caption'
197+
onClick={(e) => e.stopPropagation()}
198+
onKeyDown={(e) => e.stopPropagation()}
199+
{...handlers}
200+
>
201+
{tags.map((tag) => tag.value).join(', ')}
202+
</span>
203+
<FloatingTooltip state={state} className='max-w-[240px]'>
204+
<div className='flex flex-col gap-0.5'>
205+
{tags.map((tag) => (
206+
<div key={tag.slot} className='truncate text-xs'>
207+
<span className='text-[var(--text-muted)]'>{tag.displayName}:</span> {tag.value}
208+
</div>
209+
))}
210+
</div>
211+
</FloatingTooltip>
212+
</>
213+
)
214+
}
215+
180216
/**
181217
* Computes tag values for a document
182218
*/
@@ -1057,7 +1093,6 @@ export function KnowledgeBase({
10571093
const DocIcon = ConnectorIcon || getDocumentIcon(doc.mimeType, doc.filename)
10581094

10591095
const tags = getDocumentTags(doc, tagDefinitions)
1060-
const tagsDisplayText = tags.map((t) => t.value).join(', ')
10611096

10621097
const statusCell: ResourceCell =
10631098
doc.processingStatus === 'failed' && doc.processingError
@@ -1076,34 +1111,7 @@ export function KnowledgeBase({
10761111
: { content: getStatusBadge(doc) }
10771112

10781113
const tagsCell: ResourceCell =
1079-
tags.length === 0
1080-
? { label: null }
1081-
: {
1082-
content: (
1083-
<Tooltip.Root>
1084-
<Tooltip.Trigger asChild>
1085-
<span
1086-
role='presentation'
1087-
className='block max-w-full truncate text-[var(--text-secondary)] text-caption'
1088-
onClick={(e) => e.stopPropagation()}
1089-
onKeyDown={(e) => e.stopPropagation()}
1090-
>
1091-
{tagsDisplayText}
1092-
</span>
1093-
</Tooltip.Trigger>
1094-
<Tooltip.Content side='top' className='max-w-[240px]'>
1095-
<div className='flex flex-col gap-0.5'>
1096-
{tags.map((tag) => (
1097-
<div key={tag.slot} className='truncate text-xs'>
1098-
<span className='text-[var(--text-muted)]'>{tag.displayName}:</span>{' '}
1099-
{tag.value}
1100-
</div>
1101-
))}
1102-
</div>
1103-
</Tooltip.Content>
1104-
</Tooltip.Root>
1105-
),
1106-
}
1114+
tags.length === 0 ? { label: null } : { content: <DocumentTagsCell tags={tags} /> }
11071115

11081116
return {
11091117
id: doc.id,

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Streamdown } from 'streamdown'
44
import 'streamdown/styles.css'
55
import { cn, handleKeyboardActivation } from '@sim/emcn'
66
import { getEmbedInfo } from '@sim/utils/media-embed'
7+
import { OverflowSpan } from '../lib/overflow-span'
78

89
const EMBED_SCALE = 0.78
910
const EMBED_INVERSE_SCALE = `${(1 / EMBED_SCALE) * 100}%`
@@ -217,15 +218,13 @@ export function NoteBlockView({
217218

218219
<div className='flex items-center justify-between border-[var(--divider)] border-b p-2'>
219220
<div className='flex min-w-0 flex-1 items-center'>
220-
<span
221+
<OverflowSpan
222+
value={name ?? ''}
221223
className={cn(
222224
'truncate font-medium text-md',
223225
!isEnabled && 'text-[var(--text-muted)]'
224226
)}
225-
title={name}
226-
>
227-
{name}
228-
</span>
227+
/>
229228
</div>
230229
</div>
231230

‎packages/workflow-renderer/src/subflow/subflow-node-view.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Badge, cn, handleKeyboardActivation } from '@sim/emcn'
33
import { RepeatIcon, SplitIcon } from 'lucide-react'
44
import { Handle, Position } from 'reactflow'
55
import { HANDLE_POSITIONS } from '../dimensions'
6+
import { OverflowSpan } from '../lib/overflow-span'
67
import { tileIconColorClass } from '../lib/tile-icon-color'
78
import type { BlockRunStatus, DiffStatus } from '../types'
89

@@ -171,15 +172,13 @@ export function SubflowNodeView({
171172
)}
172173
/>
173174
</div>
174-
<span
175+
<OverflowSpan
176+
value={blockName}
175177
className={cn(
176178
'truncate font-medium text-md',
177179
!isEnabled && 'text-[var(--text-muted)]'
178180
)}
179-
title={blockName}
180-
>
181-
{blockName}
182-
</span>
181+
/>
183182
</div>
184183
<div className='flex items-center gap-1'>
185184
{!isEnabled && <Badge variant='gray-secondary'>disabled</Badge>}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,14 @@ export function SubBlockRowView({ title, displayValue, isMonospace }: SubBlockRo
3333
className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
3434
/>
3535
{displayValue !== undefined && (
36-
<OverflowSpan
37-
value={displayValue}
36+
<span
3837
className={cn(
3938
'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
4039
isMonospace && 'font-mono'
4140
)}
42-
/>
41+
>
42+
{displayValue}
43+
</span>
4344
)}
4445
</div>
4546
)

0 commit comments

Comments
 (0)