Skip to content

fix(editor): restore caret alignment and the intended type scale across the panel #6297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 3 commits into from
Aug 5, 2026
Merged

fix(editor): restore caret alignment and the intended type scale across the panel #6297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
94c9f1f
fix(editor): restore caret alignment and the intended type scale acro…
waleedlatif1 Aug 5, 2026
22c98c0
fix(emcn): give chip text fields the same tracking as their mirrors
waleedlatif1 Aug 5, 2026
58051a0
fix(editor): restore the strong-text variant a class sweep welded tog…
waleedlatif1 Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
442 changes: 223 additions & 219 deletions ...workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...flowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -503,7 +503,7 @@ export function McpDeploy({
return (
<>
<div className='flex h-full flex-col items-center justify-center gap-3'>
<p className='text-[13px] text-[var(--text-muted)]'>
<p className='text-[var(--text-muted)] text-small'>
Create an MCP Server to expose your workflows as tools.
</p>
<Button variant='tertiary' onClick={() => setShowCreateModal(true)}>
Expand Down
2 changes: 1 addition & 1 deletion ...panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export function FieldItem({
>
<span
className={clsx(
'min-w-0 flex-1 truncate font-medium',
'min-w-0 flex-1 truncate',
'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
)}
>
Expand Down
2 changes: 1 addition & 1 deletion ...Id]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ function ConnectionItem({
</div>
<span
className={clsx(
'truncate font-medium',
'truncate',
'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
)}
>
Expand Down
2 changes: 1 addition & 1 deletion ...s/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ function CheckboxItem({
/>
<Label
htmlFor={`${blockId}-${option.id}`}
className='cursor-pointer font-medium font-sans text-[var(--text-primary)] text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
className='cursor-pointer font-sans text-[var(--text-primary)] text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
>
{formatDisplayText(option.label, { workflowSearchHighlight })}
</Label>
Expand Down
4 changes: 2 additions & 2 deletions ...nel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -955,7 +955,7 @@ export function ConditionInput({
: 'rounded-t-[4px] border-[var(--border-1)] border-b'
)}
>
<span className='font-medium text-[var(--text-tertiary)] text-sm'>
<span className='text-[var(--text-tertiary)] text-sm'>
{isRouterMode ? `Route ${index + 1}` : block.title}
</span>
<div className='flex items-center gap-2'>
Expand Down Expand Up @@ -1105,7 +1105,7 @@ export function ConditionInput({
}}
placeholder='Describe when this route should be taken...'
disabled={disabled || isPreview}
className='min-h-[100px] resize-none rounded-none border-0 px-3 py-2 text-sm text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
className='min-h-[100px] resize-none rounded-none border-0 px-3 py-2 text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
rows={4}
style={{ height: `${getRouterHeight(block.id)}px` }}
/>
Expand Down
4 changes: 2 additions & 2 deletions ...onents/editor/components/sub-block/components/credential-selector/credential-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,7 +453,7 @@ export function CredentialSelector({

{needsUpdate && (
<div className='mt-2 flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
<div className='flex items-center font-medium text-caption'>
<div className='flex items-center text-caption'>
<span className='mr-1.5 inline-block size-[6px] rounded-xs bg-amber-500' />
Additional permissions required
</div>
Expand All @@ -471,7 +471,7 @@ export function CredentialSelector({
})
setShowOAuthModal(true)
}}
className='w-full px-2 py-1 font-medium text-caption'
className='w-full px-2 py-1 text-caption'
>
Update access
</Button>
Expand Down
10 changes: 5 additions & 5 deletions ...mponents/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ export function DocumentTagEntry({
const tagCount = tags.filter((t) => t.tagName?.trim()).length
return (
<div className='space-y-1'>
<Label className='font-medium text-muted-foreground text-xs'>Document Tags</Label>
<Label className='text-muted-foreground text-xs'>Document Tags</Label>
<div className='text-muted-foreground text-sm'>
{tagCount > 0 ? `${tagCount} tag(s) configured` : 'No tags'}
</div>
Expand All @@ -223,7 +223,7 @@ export function DocumentTagEntry({
return (
<div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
<div className='text-center'>
<p className='font-medium text-[var(--text-secondary)] text-sm'>
<p className='text-[var(--text-secondary)] text-sm'>
No tags defined for this knowledge base
</p>
<p className='mt-1 text-[var(--text-muted)] text-xs'>
Expand All @@ -250,7 +250,7 @@ export function DocumentTagEntry({
}}
>
<div className='flex min-w-0 flex-1 items-center gap-2'>
<span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
<span className='block truncate text-[var(--text-tertiary)] text-sm'>
{tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
</span>
{tag.collapsed && tag.tagName && (
Expand Down Expand Up @@ -334,14 +334,14 @@ export function DocumentTagEntry({
disabled={isReadOnly}
autoComplete='off'
placeholder={placeholder}
className='allow-scroll w-full overflow-auto text-transparent caret-foreground'
className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
/>
<div
ref={(el) => {
if (el) overlayRefs.current[cellKey] = el
}}
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
>
Expand Down
16 changes: 8 additions & 8 deletions ...ponents/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export function EvalInput({

const renderMetricHeader = (metric: EvalMetric, index: number) => (
<div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
<span className='font-medium text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
<span className='text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
<div className='flex items-center gap-2'>
<Tooltip.Root key={`add-${metric.id}`}>
<Tooltip.Trigger asChild>
Expand Down Expand Up @@ -194,7 +194,7 @@ export function EvalInput({
onChange={(e) => updateMetric(metric.id, 'name', e.target.value)}
placeholder='Accuracy'
disabled={isPreview || disabled}
className='text-transparent caret-foreground placeholder:text-muted-foreground/50'
className='text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
/>
<div
className={cn(
Expand Down Expand Up @@ -244,7 +244,7 @@ export function EvalInput({
placeholder='How accurate is the response?'
disabled={isPreview || disabled}
className={cn(
'min-h-[80px] whitespace-pre-wrap text-transparent caret-foreground'
'min-h-[80px] whitespace-pre-wrap text-transparent caret-foreground [letter-spacing:inherit]'
)}
rows={3}
/>
Expand All @@ -253,7 +253,7 @@ export function EvalInput({
if (el) descriptionOverlayRefs.current[metric.id] = el
}}
className={cn(
'absolute inset-0 overflow-auto bg-transparent px-2 py-2 font-medium font-sans text-[var(--code-foreground)] text-sm',
'absolute inset-0 overflow-auto bg-transparent px-2 py-2 font-sans text-[var(--code-foreground)] text-sm',
!(isPreview || disabled) && 'pointer-events-none'
)}
>
Expand Down Expand Up @@ -300,9 +300,9 @@ export function EvalInput({
autoComplete='off'
data-form-type='other'
name='eval-range-min'
className='text-transparent caret-foreground'
className='text-transparent caret-foreground [letter-spacing:inherit]'
/>
<div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-medium font-sans text-sm'>
<div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'>
{formatDisplayText(String(metric.range.min ?? ''), {
workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'min']),
})}
Expand All @@ -321,9 +321,9 @@ export function EvalInput({
autoComplete='off'
data-form-type='other'
name='eval-range-max'
className='text-transparent caret-foreground'
className='text-transparent caret-foreground [letter-spacing:inherit]'
/>
<div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-medium font-sans text-sm'>
<div className='pointer-events-none absolute inset-0 flex items-center truncate px-2 py-1.5 font-sans text-sm'>
{formatDisplayText(String(metric.range.max ?? ''), {
workflowSearchHighlight: getMetricSearchHighlight(index, ['range', 'max']),
})}
Expand Down
6 changes: 3 additions & 3 deletions ...ents/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export function FilterRuleRow({
}}
>
<div className='flex min-w-0 flex-1 items-center gap-2'>
<span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
<span className='block truncate text-[var(--text-tertiary)] text-sm'>
{rule.collapsed && rule.column
? formatDisplayText(getColumnLabel(rule.column), {
workflowSearchHighlight: getLabelHighlight('column', getColumnLabel(rule.column)),
Expand Down Expand Up @@ -175,12 +175,12 @@ export function FilterRuleRow({
disabled={isReadOnly}
autoComplete='off'
placeholder='Enter value'
className='allow-scroll w-full overflow-auto text-transparent caret-foreground'
className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
/>
<div
ref={overlayRef}
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
>
Expand Down
18 changes: 5 additions & 13 deletions ...ts/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,12 @@ interface SelectedCountDisplayProps {

function SelectedCountDisplay({ noneSelected, allSelected, count }: SelectedCountDisplayProps) {
if (noneSelected) {
return (
<span className='truncate font-medium text-[var(--text-muted)] text-sm'>None selected</span>
)
return <span className='truncate text-[var(--text-muted)] text-sm'>None selected</span>
}
if (allSelected) {
return (
<span className='truncate font-medium text-[var(--text-primary)] text-sm'>All selected</span>
)
return <span className='truncate text-[var(--text-primary)] text-sm'>All selected</span>
}
return (
<span className='truncate font-medium text-[var(--text-primary)] text-sm'>
{count} selected
</span>
)
return <span className='truncate text-[var(--text-primary)] text-sm'>{count} selected</span>
}

interface GroupedCheckboxListProps {
Expand Down Expand Up @@ -130,7 +122,7 @@ export function GroupedCheckboxList({
disabled={disabled}
onClick={() => setOpen(true)}
className={cn(
'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
'hover-hover:bg-[var(--surface-active)]'
)}
>
Expand Down Expand Up @@ -168,7 +160,7 @@ export function GroupedCheckboxList({
/>
<label
htmlFor='select-all'
className='cursor-pointer font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
className='cursor-pointer text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
>
Select all entities
</label>
Expand Down
8 changes: 5 additions & 3 deletions ...s/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export function InputMapping({
return (
<div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
<div className='text-center'>
<p className='font-medium text-[var(--text-secondary)] text-sm'>No workflow selected</p>
<p className='text-[var(--text-secondary)] text-sm'>No workflow selected</p>
<p className='mt-1 text-[var(--text-muted)] text-xs'>
Select a workflow above to configure inputs
</p>
Expand Down Expand Up @@ -274,15 +274,17 @@ function InputMappingField({
placeholder='Enter value or reference'
disabled={disabled}
autoComplete='off'
className={cn('allow-scroll w-full overflow-auto text-transparent caret-foreground')}
className={cn(
'allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
)}
style={{ overflowX: 'auto' }}
/>
<div
ref={(el) => {
if (el) overlayRefs.current.set(fieldId, el)
}}
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
!disabled && 'pointer-events-none'
)}
style={{ overflowX: 'auto' }}
Expand Down
2 changes: 1 addition & 1 deletion ...ditor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export function KnowledgeBaseSelector({
className='inline-flex items-center rounded-md border border-[color-mix(in_srgb,var(--brand-knowledge)_20%,transparent)] bg-[color-mix(in_srgb,var(--brand-knowledge)_10%,transparent)] px-2 py-1 text-xs'
>
<PackageSearchIcon className='mr-1 size-3 text-[var(--brand-knowledge)]' />
<span className='font-medium text-[var(--brand-knowledge)]'>
<span className='text-[var(--brand-knowledge)]'>
{formatDisplayText(labelOf(kb), { workflowSearchHighlight })}
</span>
{!disabled && !isPreview && (
Expand Down
8 changes: 4 additions & 4 deletions ...ts/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export function KnowledgeTagFilters({

return (
<div className='space-y-1'>
<Label className='font-medium text-muted-foreground text-xs'>Tag Filters</Label>
<Label className='text-muted-foreground text-xs'>Tag Filters</Label>
<div className='text-muted-foreground text-sm'>
{appliedFilters > 0 ? `${appliedFilters} filter(s) applied` : 'No filters'}
</div>
Expand All @@ -243,7 +243,7 @@ export function KnowledgeTagFilters({
}}
>
<div className='flex min-w-0 flex-1 items-center gap-2'>
<span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
<span className='block truncate text-[var(--text-tertiary)] text-sm'>
{filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
</span>
{filter.collapsed && filter.tagName && (
Expand Down Expand Up @@ -329,14 +329,14 @@ export function KnowledgeTagFilters({
disabled={isReadOnly}
autoComplete='off'
placeholder={placeholder}
className='allow-scroll w-full overflow-auto text-transparent caret-foreground'
className='allow-scroll w-full overflow-auto text-transparent caret-foreground [letter-spacing:inherit]'
/>
<div
ref={(el) => {
if (el) overlayRefs.current[cellKey] = el
}}
className={cn(
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
!isReadOnly && 'pointer-events-none'
)}
>
Expand Down
4 changes: 2 additions & 2 deletions ...ponents/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ export function LongInput({
<Textarea
ref={setRefs}
className={cn(
'allow-scroll box-border min-h-full w-full resize-none text-transparent caret-foreground placeholder:text-muted-foreground/50',
'allow-scroll box-border min-h-full w-full resize-none text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
wandHook.isStreaming && 'pointer-events-none cursor-not-allowed opacity-50'
)}
rows={rows ?? DEFAULT_ROWS}
Expand All @@ -357,7 +357,7 @@ export function LongInput({
<div
ref={overlayRef}
className={cn(
'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-medium font-sans text-sm',
'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-sans text-sm',
(isPreview || disabled) && 'opacity-50',
!(isPreview || disabled) && 'pointer-events-none'
)}
Expand Down
Loading
Loading