fix(editor): restore caret alignment and the intended type scale across the panel - #6297
Conversation
…ss 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).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Across the workflow editor panel (sub-blocks, toolbar, connections, copilot header), drops stray Adds Start / input-format description fields now use the same horizontal scroll sync and overlay layout as sibling fields (dedicated refs), fixing caret drift when values extend past the visible width. Reviewed by Cursor Bugbot for commit 58051a0. Configure here. |
Greptile SummaryThis PR restores the intended typography and caret alignment throughout the workflow editor and fixes MCP settings conditionals that were rendered as text.
Confidence Score: 5/5The PR appears safe to merge. No blocking failure remains; the previously reported strong-text selector issue is fixed in the current code.
|
| Filename | Overview |
|---|---|
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx | Restores independent strong-descendant weight and color variants; the previous selector issue is fixed. |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx | Adds dedicated overlay references and scroll synchronization for the Start block description field. |
| apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx | Converts five management conditionals from literal JSX text into correctly evaluated expressions. |
| packages/emcn/src/components/input/input.tsx | Makes input letter spacing inherit from surrounding typography to keep text and overlay metrics aligned. |
| packages/emcn/src/components/textarea/textarea.tsx | Makes textarea letter spacing inherit consistently across editor and application forms. |
Reviews (2): Last reviewed commit: "fix(editor): restore the strong-text var..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
An audit of the previous commit found the letter-spacing fix was incomplete: it landed on `Input`/`Textarea` but not on the chip family, so `ChipInput` and `ChipTextarea` kept the UA `letter-spacing: normal` while any overlay mirroring them inherited the ambient tracking. The MCP server form modal is a live instance — its shared `FormattedInput` layers a transparent `ChipInput` under a visible div, across the server URL and both header fields, whose values are long by nature. The caret separated from the text by roughly 0.28px per character. Fixed on `chipFieldTextClass` rather than the call site, so every chip field matches its mirror the way `Input`/`Textarea` already do.
…ether The font-weight sweep in 94c9f1f used a blanket sed, which turned [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] into [&_strong]:[&_strong]:text-[var(--text-primary)] — a chained variant matching a <strong> inside a <strong>, so ordinary strong text in trigger setup instructions lost its color. The removed weight was also load-bearing rather than decorative. Preflight sets b/strong to font-weight: bolder, so against a 400 body a bare <strong> lands near 700; the class was holding it down to 500. Deleting it made that text heavier, the inverse of the sweep's intent — the same UA-default trap as <th>. Both variants are restored. Swept for the same damage: no chained [&…]:[&…] variants remain across apps/sim or packages, and this was the only variant-scoped weight the sed touched. Found independently by Greptile and Cursor Bugbot.
|
@cursor review |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 58051a0. Configure here.
1 participant
Summary
Four distinct defects found while testing the workflow editor, plus a rendering bug in MCP settings.
Caret drift in the Start block's Description field. Its overlay mirror was built differently from every sibling:
overflow-hidden+truncateand no scroll sync, where working fields useoverflow-x-auto+whitespace-pre+syncOverlayScroll. Past the visible width the input scrolled and took the caret with it while the overlay stayed pinned at character one — so the gap grew as you typed, and only in that field. Now has the same plumbing as its siblings, on its own ref maps so it can't collide with the value overlay.11 overlay mirrors left at 500 over 400 inputs. #6291 dropped emcn
Input/Textareato the inherited weight, but the canvas files that mirror them were reverted from that PR, leaving the pairs mismatched. A mirror heavier than the input beneath it misaligns by the weight delta per character.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 its own overlay — by 0.28px/char. Fixed at the emcn base, so every mirrored input is covered at the source.Weights and sizes that changed meaning under #6241. That PR deleted the tailwind remap of
font-medium(440/480) without migrating the ~505 call sites written against it, so untouched code jumped to a stock 500. Editor, toolbar, chat and connections are swept back to the inherited weight. The Chat header was also visibly taller than Toolbar/Editor purely because it usedtext-[14px]— font-size with no paired line-height — against byte-identical containers.MCP settings rendered
canManage && ()as literal text — five JSX conditionals had lost their braces, so the expression was parsed as JSX text rather than code.Type of Change
Testing
Typecheck 0, biome clean, 18644/18645 vitest passing — the one failure is a missing
rgbinary and predates this branch. Caret fix confirmed by hand in the running app.Sed-based sweeps were verified after the fact: 0 double-applied classes, 0
[letter-spacing:inherit]on non-inputs, 0 malformed class strings, and the only non-className edits are the intendedinput-formatadditions and the MCP braces.Worth a human eye:
[letter-spacing:inherit]on emcnInput/Textareais app-wide. It's the correct default — input text should track like the text beside it — but no test can see it, so a glance at a settings form and a modal is worthwhile.Deliberately not included: the canvas block title (
workflow-block-view.tsx,truncate font-medium text-md) is also heavier post-#6241, but it lives inpackages/workflow-renderershared with the preview/landing renderers, so whether it drops to 400 is a design call rather than a bug fix.Checklist