fix(design-system): keep button labels single-line and corners capsule-shaped

[tellaho]

Category: fix
User Impact: Long button labels stay readable on one line without turning buttons into tall ovals; large buttons retain their capsule shape.

Problem: In a constrained layout, a button could wrap its label into several lines while an unlimited pill radius rounded the resulting tall control into an oval. The first bounded-radius pass also made the default large button look too square at its ends.

Solution: Keep the shared text button and its label together as a non-shrinking, single-line control, leaving wrapping or horizontal scrolling to the surrounding layout. Use a 26px capsule radius—half the standard 52px large-button height—so small, medium, and large buttons read as capsules while taller controls do not become infinitely rounded. IconButton, field corners, button emphasis, loading, and Base UI interactions are unchanged.

What to look at

The captures below come from the built design-system viewer in dark mode, with the same real shared Button component in each build. “Before” is origin/main at 183ef131; “After” is this branch after the 26px refinement. The long label is intentionally shown inside the viewer's 192px constraint to expose the original defect; the after state keeps the button at its natural width and lets the containing frame scroll at narrow widths. The long-button specimen is a stress case, not a recommendation to use that wording as ordinary product copy.

Before: four-line, 112px-tall button	After: one-line, 40px-tall button

Large size after: the lg specimen remains 52px tall with a computed 26px radius. At ordinary button sizes, the before and after screenshots look nearly identical: CSS clamps both larger radii to the button's half-height. This screenshot establishes the retained large capsule silhouette rather than implying a visually dramatic change to default controls.

Reproduce

1. Run the design-system viewer and open Components → Button in dark mode.
2. Under Single-line labels, inspect the text-and-icon examples and the long “Allow notifications for this workspace” stress case. The long label stays on one line; at narrow widths, the surrounding frame scrolls rather than compressing the button into multiple lines.
3. In Emphasis and sizes, inspect lg (52px tall): its ends remain capsule-shaped. Switch between small, medium, and large, light and dark modes; labels, icons, loading and disabled appearances retain their usual treatment.
4. Try the page at 390px, 800px, and 1280px widths, then increase root font size to 200%; the surrounding document should not acquire horizontal overflow.

Dialog footer repair (8ac02c44)

The narrow dialog footer was still overriding the new Button contract with flex: 1 1 auto, squeezing an intact label outside its control. The shared footer now retains non-shrinking buttons, wraps whole actions, and owns horizontal overflow with safe end alignment so an oversized control’s leading edge is not stranded offscreen. Ordinary compact buttons still expand to fill available space. No community or relay logic changed.

Validation:

• Added one production-app browser journey (2 engine cases, none removed), using the actual community profile action “Publish profile & open.” Real font metrics, CSS overflow, scrolling and native focus/activation cannot be established in jsdom.
• Before the CSS repair, the label-containment assertion failed in both Chromium and WebKit at b9226d20 plus the new test. The complete final browser file then passed 2/2 on the exact diff committed unchanged as 8ac02c4499ed5a6417d42c7261e0bccda603b198 (5.2s total runner time). Command: bin/pnpm test:browser tests/browser/dialog-actions.spec.mjs --project chromium --project webkit --no-deps.
• Covers 320/800/1280px widths; 100%/200% app text in light mode and 200% in dark mode; single-line label containment; both scroll edges at 320px/200%; Tab focus and Enter submission through the fixture profile endpoint into the joined community.
• Mandatory hooks passed: staged lint/format, app TypeScript, 47 related unit tests across 11 files, design TypeScript and design guards. git diff --check passed. Hosted DCO passed at the new head; new CI is running. Full-suite, native and human acceptance remain unclaimed. No retries or timeout increases.
• The unrelated relay timeout is now reproduced on main: job at ea7ddb81, 5.963s against 5s; 4,949 other tests passed. A subsequent main run passed. Relay repairs remain outside this PR.

Real built-app footer crops, 320px viewport / 200% app text / dark mode, using neutral fixture data. These are the two ends of the same horizontal scroll area—not a claim that the whole label fits simultaneously at this scale.

Scrolled to start	Scrolled to end

Previous rebased head (b9226d20)

Rebased onto main at 3a19fa43075283423c88a68d4a1362fade28ad3e without conflicts and pushed with an explicit force-with-lease. Range-diff confirms the same patches except the workflow-discovery assertion is now already on main and is no longer part of this PR. Existing commit authorship and DCO trailers are preserved.

At clean head b9226d2008219eaad4dcf45842c450eed291ae37:

• Changed-file Biome checks and git diff --check passed.
• 32/32 headless Chromium/WebKit cases passed across the complete thread-unread, nested-replies, notification-settings, and plugin-import files (2.0 minutes). Command: bin/pnpm test:browser --project chromium --project webkit --no-deps tests/browser/thread-unread.spec.mjs tests/browser/plugin-import.spec.mjs tests/browser/notification-settings.spec.mjs tests/browser/nested-replies.spec.mjs.
• Required pre-push hooks passed: app TypeScript, 47 related unit tests across 11 files, design TypeScript, and design guards. The related-test count is lower because the workflow-discovery test correction is now in the base.
• Hosted DCO Check passed. Rebased-head CI passed all six browser shards but failed JavaScript on the relay replay test’s 5s timeout; the same test later failed on main. No full local suite was repeated.
• Human/native-app verification remains unclaimed. The PR was already non-draft when this rebase began; its draft/ready state was not changed. No merge or review-completion attestation is implied.

Earlier validation (pre-rebase snapshots)

• On the merged-from-main working tree before the final clean commit, bin/pnpm design:test passed 104/104 tests, bin/pnpm design:check passed, bin/pnpm design:build passed, and bin/pnpm design:test:browser passed 72/72 Chromium and WebKit viewer tests. The latter includes full app and viewer builds and TypeScript checks. After a base-only rebase (no changed design-system paths in incoming main), the final diff passed bin/pnpm exec biome check on all changed source/test files, bin/pnpm design:check, and git diff --check at c8653509.
• The viewer's browser assertions cover computed corner radius across button sizes in light and dark modes, keyboard focus and loading behavior, one-line labels in constrained layouts at three viewport widths and two font scales, and document overflow.
• Existing shared viewer suite: 0 browser cases added or removed; expanded one existing button behavior case and strengthened the geometry case because computed layout/corner radius and real browser wrapping cannot be proved in jsdom. No test harness configuration changed; no test timing comparison needed.

CI regression repairs (6f230ab9)

The initial hosted run exposed three production-layout regressions, each reproduced locally in the built app before the repair:

• Notifications: constrain the preference grid to its available column instead of letting an oversized permission action widen every preference row; permission actions own horizontal scrolling when needed.
• Plugin import: the labeled action group owns horizontal scrolling when a 200%-sized label cannot fit the 320px viewport. Labels remain single-line and are not reduced or clipped by the panel.
• Nested replies: constrain the summary control and allow its avatar/count groups to reflow as whole groups. Individual labels remain single-line. Original thread containment assertions remain intact.
• Discovery test: assert the existing workflow reader's single, canonicalized channel-batch filter and its exact limit rather than the obsolete one-filter-per-channel shape. No relay/workflow production code changed. This historical repair is now on main and is absent from the current PR diff.

Validation:

• The complete Vitest suite passed 4,862/4,862 across 408 files on the repair working tree based on merge ce30895d, before the final equivalent CSS-selector cleanup and semantic fieldset markup. This is not a claim that the whole suite was rerun on the final commit.
• At clean committed head 6f230ab99c7a268df94bb8ff5ea00a929cf71bed, all 26/26 cases in nested-replies.spec.mjs, notification-settings.spec.mjs, and plugin-import.spec.mjs passed across Chromium and WebKit, headlessly. These use the built app with fixture relay/native adapters, not a native desktop launch.
• The existing plugin geometry case now asserts the explicitly changed single-line contract, contained scroll viewport, reachability of both button edges, and keyboard activation at 320px/200% text. Text containment, normal-size heights, icon geometry, theme/width coverage, and the Notifications/thread assertions remain. 0 browser cases added or removed; no retries, timeout increases, or harness changes.
• Required pre-commit and pre-push hooks passed at 6f230ab9: staged formatting/lint, TypeScript, 73 related tests, design types, and design guards. Hosted DCO Check passed at that head.
• Historical status at this repair: hosted CI was pending; see the rebased-head section above for current status. Human/native-app verification remains unclaimed. No review-completion attestation is claimed.

Remaining WebKit repair (06a8182a)

The next hosted run passed JavaScript, Rust, all Chromium shards, and two WebKit shards. WebKit shard 3 had 135 passed / 1 failed: thread-unread.spec.mjs reopened Search immediately after reload, then timed out waiting for the palette to close. The trace shows startup results moving Messages from shortcut 2 to shortcut 6 during its click; this was not a failing button-layout assertion.

• Replace that unnecessary navigation with a wait for the existing navigation controller to report opened on the exact saved entry. The unread persistence test now verifies restoration rather than potentially hiding a broken restore by opening a new visit.
• All existing unread, focus, hover, and membership-query assertions remain. One test file changed; no production code, shared helper, retry, timeout, or assertion tolerance changed. Zero browser cases added or removed.
• bin/pnpm test:browser tests/browser/thread-unread.spec.mjs --project chromium --project webkit --no-deps: 6/6 passed, headlessly, in 25.3s on 6f230ab9 plus the exact one-file diff committed unchanged as 06a8182a512a79ca3829c292ef4c3e2291c80017. This is focused repair validation, not a local rerun of the full hosted suite.
• Required hooks passed at 06a8182a: formatting/lint, TypeScript, 73 related unit tests, design types and guards. Hosted checks were pending when that repair was published; see the rebased-head section above for current status.
• The separate Search/startup moving-target interaction is not fixed or claimed fixed here. Human/native-app verification remains unclaimed.

Agent-assisted implementation and validation by Carl.

File changes

src/shared/design-system/styles/components.css
Keep text buttons and their labels together using a non-shrinking, no-wrap flex layout; switch only text buttons from the unbounded pill role to the capsule role.

src/shared/design-system/styles/tokens.css
Define the 26px capsule radius as a dedicated semantic role so large buttons keep the intended silhouette without changing circles, chips, or fields.

src/shared/design-system/DESIGN.md
Explain when to use the capsule versus fully round corners and how containing layouts should handle a single-line action.

src/shared/design-system/tokens/registry.ts
Document the capsule radius and its intended uses in the token catalog.

src/shared/design-system/ui/registry.ts
Update the Button description so its single-line, bounded-capsule behavior is discoverable.

tests/fixtures/design-system/ui/ButtonSpecimens.tsx
Show text, icon, constrained-layout, and long-label examples in the real component viewer.

tests/fixtures/design-system/viewer.spec.ts
Assert computed geometry, keyboard focus, loading, no-wrap labels, narrow and enlarged layouts, and scroll bounds in both browser engines.

[wesbillman]

Star Lord automated source review

Submitted through Wes’s account (wesbillman) as a non-blocking COMMENT review.

Reviewed head b9226d2008219eaad4dcf45842c450eed291ae37 against base/merge-base 3a19fa43075283423c88a68d4a1362fade28ad3e.

One actionable P2 finding: narrow dialog footers still override the new non-shrinking button contract, allowing long single-line action text to overflow its button at enlarged text sizes. The inline comment names the concrete community-join caller and the smallest owning-layer repair.

I reviewed the full 13-file diff, the shared Button/IconButton and loading composition, typography/radius ownership, notification permission layout, plugin-import scroller semantics and keyboard assertions, reply-summary composition, and the unread test’s exact-entry restoration barrier. The three explicitly repaired layouts and the 26px capsule role are consistent with the stated design. Browser case count is unchanged; the expanded geometry/scroll/focus assertions belong in real browsers, and the unread change retains the original post-restore assertions.

Hosted CI snapshot (not a local run): run 36485586027 shows all six browser shards, Rust/tool integration, browser measurements, security checks and DCO succeeding; Windows was skipped. JavaScript and CI required failed: src/features/relay/live.test.ts:208 (“keeps quiet-channel unread evidence when another filter fills its replay allowance”) hit its 5s timeout, with 4,935 tests passing and one failing. That test’s blob is identical to the base; I have not established the timeout’s cause or attributed it to this layout diff. It still needs CI triage, not an assumption that the full gate is green. Measurements were 7/7 (185.0s runner wall time, 173.0s summed test execution); no comparative performance claim.

Limits: source-only review using a pinned GitHub archive, with all 1,614 regular source files checked against Git blob hashes; no dirty worktree inputs. I ran no PR code, tests, builds, installs, or app/native workflows. The narrow-dialog finding is source-derived; current-head standalone viewer execution and human/native acceptance were not verified by this review. This is neither approval nor merge authorization.

[tellaho]

AI-generated update by Carl, posted through Taylor’s account.

Fixed the dialog-footer blocker in 8ac02c44: compact footers no longer shrink single-line actions; oversized controls scroll from a reachable start edge. The real community profile action stays inside its button and remains keyboard-operable.

The new browser regression failed before the CSS repair in Chromium and WebKit, then passed 2/2 on the exact committed patch. It covers 320/800/1280px widths, 100%/200% text, light/dark appearance, label containment, both scroll edges, and Tab/Enter submission. Mandatory hooks passed (TypeScript, 47 related unit tests, design types/guards); hosted DCO passed. New CI is running, not yet green. The directly addressed thread is resolved.

The relay-test timeout also occurred on main in this job; no relay changes are included here. Human/native acceptance remains outstanding. The description includes real-app footer crops and exact validation scope.

[wesbillman]

Star Lord automated source review — follow-up

Submitted through Wes’s account (wesbillman) as a non-blocking COMMENT review.

Reviewed head 8ac02c4499ed5a6417d42c7261e0bccda603b198 against base 3a19fa43075283423c88a68d4a1362fade28ad3e.

The prior dialog-footer finding is addressed in source; no new actionable findings in this follow-up. The substantive change since the reviewed b9226d20 revision is limited to the shared footer CSS, its documentation, and the new browser regression.

• styles/overlays.css:134–143,237–243 keeps narrow actions non-shrinking (flex: 1 0 auto), preserves whole-control wrapping, and gives oversized controls a contained horizontal scroll region with safe-start fallback. This fixes the specific cascade conflict reported previously without changing community/relay logic.
• tests/browser/dialog-actions.spec.mjs exercises the actual community profile action with minimal history: supported app text scaling, label containment, both scroll edges, Tab traversal, and Enter submission. One journey/two engine cases are added, none removed; real font geometry and native focus scrolling justify browser coverage. The description reports fail-before/pass-after evidence; I did not execute or independently reproduce that local run.
• Traced shared Dialog/AlertDialog composition and the affected footer callers, including pending, success, cancel, and error/retry paths. Their interaction owners remain unchanged. The new journey covers success, not rejected-submission focus recovery; this review does not claim runtime verification of that path.
• Inspected the public description and all five attached images, plus changed source/docs/tests and commit messages. No new actionable public-material issue identified; legitimate attribution is preserved.

Hosted evidence, one snapshot: run 36491895232, associated with this head, showed JavaScript and browser measurements passing; Rust/tool integration and all six browser journey shards were still running, and Windows was skipped. Measurement artifacts report 7/7 expected passes, 176.5s runner wall time and 165.6s summed test execution; the slowest case was Chromium cursor paging at 82.2s. These are hosted observations, not a comparative performance claim or a completed full-CI gate. No polling was performed.

Limits: source-only review of a pinned archive; all 1,615 regular source blobs were verified against Git blob identities and rechecked unchanged, with no dirty worktree inputs. No PR code, tests, builds, installs, app launches, or native workflows were run. Current-head standalone viewer execution, error/retry focus behavior, and human/native acceptance remain unverified by this review. This is neither approval nor merge authorization.