mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-24 15:45:35 +08:00
fix(editor): restore caret alignment and the intended type scale across the panel (#6297)
* 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).
* fix(emcn): give chip text fields the same tracking as their mirrors
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.
* fix(editor): restore the strong-text variant a class sweep welded together
The font-weight sweep in 94c9f1f68 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.
This commit is contained in:
@@ -26,9 +26,18 @@ export const chipFieldSurfaceClass = `rounded-lg ${chipFilledSurfaceTokens} tran
|
||||
*/
|
||||
export const chipBorderShadowRing =
|
||||
'shadow-[0_0_0_1px_rgba(28,40,64,0.08),0_1px_3px_0_rgba(28,40,64,0.1)] dark:shadow-[0_0_0_1px_var(--border-1),0_1px_3px_0_rgba(0,0,0,0.3)]'
|
||||
/** Typography shared by the chip text fields — normal weight, `--text-body`, muted placeholder, no focus outline. */
|
||||
/**
|
||||
* Typography shared by the chip text fields — normal weight, `--text-body`, muted
|
||||
* placeholder, no focus outline.
|
||||
*
|
||||
* `[letter-spacing:inherit]` undoes the UA stylesheet, which pins form controls to
|
||||
* `letter-spacing: normal`. Without it a chip field's text tracks differently from
|
||||
* the labels around it, and any transparent-field-over-mirror overlay diverges from
|
||||
* its mirror by the inherited tracking on every character — so the caret drifts
|
||||
* further from the visible text the longer the value. Matches `Input`/`Textarea`.
|
||||
*/
|
||||
export const chipFieldTextClass =
|
||||
'text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-muted)]'
|
||||
'text-[var(--text-body)] text-sm [letter-spacing:inherit] outline-none placeholder:text-[var(--text-muted)]'
|
||||
|
||||
/**
|
||||
* Icon↔label gap of the canonical chip-content row — the icon↔label pair inside
|
||||
|
||||
@@ -20,8 +20,16 @@
|
||||
import * as React from 'react'
|
||||
import { cn } from '../../lib/cn'
|
||||
|
||||
/**
|
||||
* `[letter-spacing:inherit]` undoes the UA stylesheet, which resets form controls
|
||||
* to `letter-spacing: normal`. Two reasons it matters: input text otherwise tracks
|
||||
* differently from every label beside it, and a transparent-input-over-mirror
|
||||
* overlay (the sub-block editors) diverges from its mirror by the inherited
|
||||
* tracking on every character — so the caret drifts further from the text the
|
||||
* longer the value. Keep this in step with `Textarea`.
|
||||
*/
|
||||
const INPUT_CLASS =
|
||||
'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50 scroll-pr-1'
|
||||
'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50 scroll-pr-1'
|
||||
|
||||
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
|
||||
|
||||
|
||||
@@ -2,8 +2,9 @@ import * as React from 'react'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '../../lib/cn'
|
||||
|
||||
/** `[letter-spacing:inherit]` — see the note on `INPUT_CLASS`; keep the two in step. */
|
||||
const textareaVariants = cva(
|
||||
'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-sans text-sm text-[var(--text-primary)] [letter-spacing:inherit] transition-colors placeholder:text-[var(--text-muted)] outline-none resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
Reference in New Issue
Block a user