Media: Align the Scale button with the dimension inputs in image editor.#12112
Media: Align the Scale button with the dimension inputs in image editor.#12112itzmekhokan wants to merge 1 commit into
Conversation
In the media modal, `.media-modal-content .button` applies a compact 32px min-height to buttons, while the adjacent dimension inputs use the 40px min-height introduced for form fields in [61645] / #64547. This left the "Scale" button shorter than and misaligned with the width and height inputs on the Edit Image screen. Give the Scale button a 40px min-height within `.imgedit-scale-controls` so it matches the inputs, and center its label with flexbox. This restores a consistent, aligned control row without reducing the inputs below the accessible 40px target size. Fixes #65428.
|
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. |
Summary
.media-modal-content .buttonapplies a compact 32px min-height to buttons in the modal. The Scale control row was missed, so its inputs are 40px but its button stayed 32px..imgedit-scale-controlsand center its label with flexbox, so all three controls match in height and align. The inputs are kept at the accessible 40px target size rather than shrunk to 32px.Why this approach
line-heightmagic numbers and follows the same "convert to flexbox" direction as the reskin.Trac ticket: https://core.trac.wordpress.org/ticket/65428
Use of AI Tools
N/A
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.