Login and Registration: Center the Remember Me row and help toggle - #13202
Login and Registration: Center the Remember Me row and help toggle#13202itzmekhokan wants to merge 1 commit into
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
291e548 to
36d2946
Compare
itzmekhokan
changed the title
|
I am not familiar with the exact design for this, but checkbox seems little bit up and tooltip icon is little bit down compare to text. However, the difference isn't noticeable. 
|
|
@itzmekhokan i have tested the fix in WordPress playground and center alignment appears to be off by pixel |
The "Remember Me" checkbox, label, and help toggle sit in a floated paragraph laid out inline. The help toggle is an inline-flex box, so it takes its baseline from the icon it wraps rather than from the text, which lifts it above the label it belongs to. Separately, the paragraph has never been centered against the taller Log In button beside it. Making the paragraph a flex row aligns all three against each other, and giving it the button's height centers the row against the button. Since centering aligns margin boxes, the margins the checkbox and label carried for the inline layout are zeroed so both land on the row's center. Fixes #65918.
36d2946 to
b304519
Compare
|
Thanx for this PR, I was noticing the same thing and thought it was by design but I didn't like it (I didn't have time to investigate whether the offset was by design or not). The PR looks good to me (the commit @itzmekhokan did an hour ago fixes the problem reported by @dhruvang21. |
4 participants
On the login form the "Remember Me" help icon sits above the label text, and the row sits above the Log In button's center.
The checkbox, label, and toggle are laid out inline in a floated paragraph. The toggle is an inline-flex box, so it takes its baseline from the icon it wraps rather than from the text; and the 24px paragraph has never been centered on the 40px button. Making the paragraph a flex row aligns the three items to each other, and giving it the button's height centers the row on the button.
Centering aligns margin boxes, so the margins the checkbox and label carried for the inline layout are zeroed;
gaprestores the spacing inline whitespace provided.Trac ticket: https://core.trac.wordpress.org/ticket/65918
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Measuring the misalignment against trunk and against pre-7.1 geometry, testing candidate rules including long-label and RTL output, and drafting the CSS change. All changes were reviewed and validated by me.