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

Four distinct defects, all surfaced while testing the workflow editor.

**Caret drift in the Start block's Description field.** Its overlay mirror was
built differently from every sibling field: `overflow-hidden` + `truncate` and
no scroll synchronisation, where the working fields use `overflow-x-auto` +
`whitespace-pre` + `syncOverlayScroll`. Once the value passed the visible width
the input scrolled and carried the caret with it while the overlay stayed pinned
at the first character, so the gap grew as you typed. It now has the same
plumbing as its siblings, on its own ref maps so it cannot collide with the value
overlay.

**Overlay mirrors left at 500 over 400 inputs.** #6291 dropped emcn Input and
Textarea to the inherited weight, but the canvas files that mirror them were
reverted from that PR, so 11 overlays kept a hardcoded `font-medium`. A mirror
that renders heavier than the input beneath it misaligns by the weight delta on
every character. All 11 realigned.

**Input text tracking differently from its label.** The UA stylesheet resets form
controls to `letter-spacing: normal`, so inside `.workspace-root` (0.02em) an
input diverged from surrounding text — and from its own overlay — by 0.28px per
character. emcn Input and Textarea now carry `[letter-spacing:inherit]`, which
fixes every mirrored input at the source rather than per call site.

**Weights and type sizes that changed meaning under #6241.** That PR deleted the
tailwind remap of `font-medium` (440 light / 480 dark) without migrating the
~505 call sites written against it, so untouched code jumped to a stock 500. The
panel's editor, toolbar, chat and connections surfaces are swept back to the
inherited weight. The Chat header was also visibly taller than Toolbar and Editor
purely because it used `text-[14px]` — font-size with no paired line-height —
against otherwise byte-identical containers; it and the panel's two other
arbitrary sizes now use named tokens.

Also fixes five JSX conditionals in the workflow MCP settings page that had lost
their braces, so `canManage && ()` rendered as literal text under the server
detail tab.

Verified: typecheck 0, biome clean, 18644/18645 vitest passing (the one failure
is a missing `rg` binary and predates this branch).

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -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)}>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -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)]'
         )}
       >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx

@@ -161,7 +161,7 @@ function ConnectionItem({
         </div>
         <span
           className={clsx(
-            'truncate font-medium',
+            'truncate',
             'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
           )}
         >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx

@@ -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>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx

@@ -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'>
@@ -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` }}
                 />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx

@@ -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>
@@ -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>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -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>
@@ -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'>
@@ -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 && (
@@ -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'
           )}
         >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -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>
@@ -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(
@@ -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}
                       />
@@ -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'
                         )}
                       >
@@ -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']),
                     })}
@@ -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']),
                     })}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx

@@ -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)),
@@ -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'
         )}
       >