Repository navigation
Use inline-block on procaptcha wrapper so it inherits form alignment - #851
Merged
dannyvankooten merged 1 commit intoAug 12, 2026
Merged
Conversation
The wrapper was display:block, which meant themes that centered the surrounding form (e.g. Woodmart with text-align:center) still rendered the widget hard-left. Switching to display:inline-block lets the parent form's text-align propagate to the widget without any user-facing setting. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
forgetso
force-pushed
the
prosopo-procaptcha-alignment-setting
branch
from
August 10, 2026 12:53
cf1267b to
bba9812
Compare
forgetso
changed the title
This was referenced Oct 18, 2026
forgetso
added a commit
to prosopo/captcha
that referenced
this pull request
Oct 18, 2026
A host that sizes the widget by measuring it — an inline-block, a float, an auto-sized grid or flex item, an absolutely positioned box — asks how wide the widget wants to be. __wrapper is `container-type: size`, so it is measured as if it were empty and answers with nothing, and every other box sizes in percentages, which resolve as `auto` against an indefinite width. The host found only __wrapper's 170px min-width and laid the widget out at that floor, in its smallest container-query breakpoint: 10px label, logo crammed against the checkbox. Add a zero-height row of two unwrappable boxes as a sibling of the contained wrapper, so min-content is the wider box (the floor) and max-content is the pair (302px, the natural width). Measured in Chrome across block, inline-block, float, flex item, flex column with align-items, auto grid track, table cell, absolute and fit-content parents at 150/170/250/500px: the widget now lays out at 302px wherever there is room and shrinks to the parent where there is not. A definite `width: 302px` on __outer also fixes the wide cases, but sets min-content as well as max-content, so the widget overflows any shrink-to-fit host narrower than 302px instead of shrinking into it. `contain-intrinsic-width` has the same problem — it cannot express a min-content that differs from max-content. Found via Mailchimp for WordPress, whose wrapper became an inline-block in ibericode/mailchimp-for-wordpress#851. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Originally I added a Left/Center/Right toggle so users could work around themes (e.g. Woodmart) that center the surrounding form but leave the captcha widget hard-left:
Simpler fix: change the
<mc4wp-procaptcha>wrapper fromdisplay: blocktodisplay: inline-block. Block-level elements ignoretext-alignon their parent; inline-block elements honor it. So the widget now inherits whatever alignment the surrounding form uses, and no user-facing setting is needed.Verified locally against left/center/right parents with the real Prosopo widget.