Skip to content

fix(php-transformer): keep a centered button's margins inside its block-flow item - #3770

Merged
chubes4 merged 1 commit into
trunkfrom
fix/centered-button-wrapper-margins
Oct 29, 2026
Merged

chubes4 merged 1 commit into
trunkfrom
fix/centered-button-wrapper-margins

Conversation

@chubes4

@chubes4 chubes4 commented Oct 29, 2026

Copy link
Copy Markdown
Contributor

Fixes #3767.

What

registerNativeButtonStyleRule filled the synthesized core/buttons wrapper (width:100%) whenever an inline-level control was centered by inherited text-align. Author CSS also projects the control's side margins onto that wrapper. In block flow the result was 100% wide plus its margins: the wrapper overflowed and pushed the button off center.

The flex wrapper already spans its line when the source parent is a block container (block, flow-root, list-item, inline-block, table-cell). It now gets width:100% only when the parent lays out items differently, such as flex or grid. The button itself still shrink-wraps its label, and the restated justifyContent still centers it.

inherited-text-align-button-justification.php asserted the exact width:100% rule. That assertion is dropped. The test's own "wrapper is not pinned to max-content" assertion still guards the behavior it protects. A browser check of its markup gives the same x for source, trunk and this PR: nested 328/328/328, direct 328/328/328, flex parent 0/0/0.

Evidence

New tools/visual-parity/tests/centered-button-margins.mjs with the tests/fixtures/centered-button-margins.html fixture. Each pair is [li width, button offset within li]:

Source Trunk This PR
per li [96,8], [98,8] [96,16], [98,16] (fails) [96,8], [98,8]

Real site: the dyrefondet.dk donation-amount buttons sit 4 px right of the source on the current import. With this PR, #3756 and #3768 together, five reduced variants of that row (block/flex-column parents, shared and scoped margin rules, a fixed-width ancestor) match the source x positions exactly.

composer test:unit, composer parity, the visual-parity npm test and phpstan all pass, and phpcs on the changed file is clean.


AI assistance: Claude (Fable) via Pi (Roadie) found the issue, wrote the fix and test, and ran the verification; Chris Huber directed.

@chubes4
chubes4 force-pushed the fix/centered-button-wrapper-margins branch from b9605e5 to 408d4d9 Compare October 29, 2026 22:31
@chubes4
chubes4 merged commit 7aabfbf into trunk Oct 29, 2026
15 checks passed
@chubes4
chubes4 deleted the fix/centered-button-wrapper-margins branch October 29, 2026 22:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Centered inline-block button with side margins overflows its block-flow item

1 participant