button: carry the caller's alignment to the content row

[Hmbown]

Summary

A Button draws its content in an h_flex that fills the root (size_full) and centers its children. Alignment set on the Button (justify_start(), items_start()) refined only the root, where it had nothing left to place, because the content row already fills it. So a row-shaped button, ghost().w_full().justify_start(), still centered its label and children, and a list of such rows rendered staggered, each centered at its own width.

The content row now repeats the caller's justify_content and align_items after the crate-internal content_style.

Found in the Codewhale native golden-path walk (app source 3ff67bb, kit pin 60eeba2c): the My work "Connected work" rows rendered centered and staggered under a left-aligned header.

Behavior change

No API change. A Button that sets justify_* or items_* on itself now gets that alignment for its content:

  Button::new("row").ghost().w_full().justify_start().label("Row")
- // label centered in the full-width button
+ // label at the leading padding

Unchanged:

• A Button that sets no alignment keeps its centered content.
• A dropdown caret still spreads the row with justify_between.
• gpui_base::Button is not touched.

In this repo two story rows (collapsible, combobox) asked for justify_start and now get it.

Testing

Local, macOS arm64, on e3dfda2f plus this change:

• cargo test -p gpui-component --lib: 530 passed, 0 failed, 0 ignored. This includes the new button::button::tests::full_width_button_places_content_by_its_alignment:
  • a 400px justify_start button puts its child at the leading padding;
  • the same button asked for nothing keeps the child centered;
  • an items_start button 60px tall puts its child at the top edge.
• cargo clippy -p gpui-component --lib --tests -- --deny warnings: clean
• cargo fmt --all -- --check: clean
• script/check-ai docs: PASS

Not run locally: typos, other crates' tests, other platforms. The new test was not run against the pre-fix Button. The Codewhale app's own guard test fails on the old pin (60eeba2c): its first row's content sits centered at x=481 in a row starting at x=195.5.

Docs

Button "Content Alignment" example, in en and zh-CN.

The change, test and docs were written with Claude Code.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[Copilot]

Copilot review overview

🟢 Approval recommended

The focused implementation preserves defaults and dropdown behavior while providing adequate regression coverage and synchronized documentation.

Review effort: Balanced
Findings: None

What changed in this PR

Propagates caller-defined alignment from Button to its full-size content row.

Changes:

• Applies horizontal and vertical alignment to button content.
• Adds regression coverage for start, center, and top alignment.
• Documents alignment behavior in English and Chinese.

File	Description
crates/​component/​src/​button/​button.rs	Propagates alignment and adds tests.
website/​component/​button.md	Documents content alignment.
website/​zh-CN/​component/​button.md	Adds synchronized Chinese documentation.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.