base red: Cloud start state words hide with no 1 px box (design-token check, after #33139)

Merged
LA
3d ago
+3-1

Fixes the web-lint red at feat-cmux-next tip (webviews: bun run check:design-tokens, exit 1). Culprit: #33139 (adb7fe3b0e6).

Cause

#33139 gave the Cloud start card its own .visually-hidden rule with height: 1px. The design-token ratchet does not allow 1px for height (it is not on the control-height scale) and the baseline for cloudStart.css has no 1px height.

Takes back #33139: only the 1 px box of its .visually-hidden rule; the words stay hidden for sight and stay for screen readers, so #33139's fix stays.

Fix

The state words stay in the 16 px mark (position: relative). The rule clips them to nothing with clip and clip-path: inset(50%), with no 1 px box, as modelPicker.css's .sr-only does. No exception and no baseline change. The words are still in the DOM for screen readers, and they do not draw over the step names.

Red at the base, green at the head

Command: cd webviews && bun run check:design-tokens

  • Red at adb7fe3b0e6 and at the tip 9c84f8f9320: new design token violation (1 > 0): agent-session/acpmux/cloudStart.css height height 1px
  • Green at 5d71c4070ac (parent of #33139) and at this head: Design token ratchet passed: 2039 recorded violations.

Changelog

none

Observed / Not run

Observed: bun run check:design-tokens red and green as above; bun test src/agent-session/acpmux/CloudStartView.test.tsx 15 pass (it includes #33139's test that the card hides the words itself); scripts/web-lint.sh passed; prepush-gate.py passed.
Not run: no gallery capture. The change only touches a rule for text that is clipped to nothing.

Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

Summary by cubic

Fixes the design-token violation that made bun run check:design-tokens fail on feat-cmux-next after #33139.

The .visually-hidden rule added in #33139 used a 1px height, which the design-token ratchet rejects. The state words now stay in the 16px mark and are clipped to nothing with clip and clip-path: inset(50%), matching modelPicker.css's .sr-only pattern so no 1px box is needed. The words remain in the DOM for screen readers and no longer draw over the step names.