![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 6 weeks ago
Closed 3 weeks ago
#65428 closed defect (bug) (fixed)
Scale button not aligned to dimensions on edit image screen.
| Reported by: | muryam | Owned by: | joedolson |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.0.1 |
| Component: | Media | Version: | 7.0 |
| Severity: | normal | Keywords: | has-patch dev-feedback |
| Cc: | Focuses: | ui, css |
Description
On Edit image screen where we have dimensions and Scale button to scale image, button and inout for dimenisons are not aligned to each other in WP 7.
Replication:
- Click this link https://playground.wordpress.net/?php=8.5&wp=7.0&networking=yes&language=#ewogICJwbHVnaW5zIjogW10sCiAgInN0ZXBzIjogWwogICAgewogICAgICAic3RlcCI6ICJ3cC1jbGkiLAogICAgICAiY29tbWFuZCI6ICJ3cCBtZWRpYSBpbXBvcnQgaHR0cHM6Ly9zYW1wbGUtZmlsZXMuY29tL2Rvd25sb2Fkcy9pbWFnZXMvanBnL3RodW1ibmFpbF8xNTB4MTUwXzEwLjVrYi5qcGcgLS10aXRsZT0nU2FtcGxlIEltYWdlJyIKICAgIH0KICBdLAogICJwcmVmZXJyZWRWZXJzaW9ucyI6IHsKICAgICJwaHAiOiAiOC41IiwKICAgICJ3cCI6ICI3LjAiCiAgfSwKICAiZmVhdHVyZXMiOiB7fSwKICAibG9naW4iOiB0cnVlLAogICJsYW5kaW5nUGFnZSI6ICIvd3AtYWRtaW4vdXBsb2FkLnBocD9pdGVtPTQmbW9kZT1lZGl0Igp9
- This is WordPress Playground link lands on edit Image page.
- CLick on Scale button.
Attachments (3)
Change History (15)
This ticket was mentioned in PR #12112 on WordPress/wordpress-develop by @khokansardar.
6 weeks ago
#2
- Keywords has-patch added
## Summary
- On the Edit Image screen (media modal), the Scale button rendered 8px shorter than the adjacent width/height inputs and sat top-aligned, leaving a visible gap below it. See the "WP 7" vs "6.9" screenshots on the ticket.
- Root cause: the 7.0 design-system reskin ([61645] / #64547) raised form inputs to a 40px min-height, while
.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. - Fix: give the Scale button a 40px min-height within
.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
- Reverting the originating commit isn't viable — it's the full reskin touching many files; this is a targeted fix for the one missed control group.
- Bumping the button to 40px (vs. shrinking inputs to 32px) keeps the larger, accessible target size, consistent with the rest of the reskin and matching the pre-7.0 (6.9) appearance where the controls were equal height.
- Flexbox centering avoids hard-coded
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
#3
@
6 weeks ago
Test Report
Patch tested: https://github.com/WordPress/wordpress-develop/pull/12112
Environment
- WordPress: 7.1-alpha-20260606.133254
- Subdirectory: No
- PHP: 7.4.33
- Server: PHP.wasm
- Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
- Browser: Chrome 148.0.0.0
- OS: Windows 10/11
- Theme: Twenty Twenty-Five 1.5
- MU Plugins: None activated
- Plugins:
- Test Reports 1.2.1
Actual Results
✅ Issue resolved with this patch.
| Before | After |
 | 
|
#4
@
6 weeks ago
It would be easy to change only the height of the problematic button to 40px, but that seems like a temporary fix. For starters, why is the button height in this modal 32px when we've set 40px as the default in our new design system? Furthermore, buttons like Crop and Scale should be 40px in the mobile layout, but they aren't. It seems like there's some kind of inconsistency at play. Shouldn't we remove the following CSS that forces a height of 32px?
If we do, all buttons will be displayed with a height of 40px, which should consequently fix the alignment issues.
If we truly need a button with a size of 32px, I recommend using the .button-compact CSS class instead of applying min-height. This is because the button-compact CSS class changes the button's height to 40px in the mobile layout.
This ticket was mentioned in PR #12125 on WordPress/wordpress-develop by @wildworks.
6 weeks ago
#5
Alternatives to #12112
If the button size is 32px by default, many CSS overrides are required to match the height of other form elements such as input and select, which are 40px.
This PR changes the default button size from 32px to 40px in the media modal and attachment detail modal. While this PR is a bit aggressive, it should resolve all button size inconsistencies.
Trac ticket: https://core.trac.wordpress.org/ticket/65428
## Screenshots
### Attachment details modal
| Before | After |
|---|---|
| | |
| | |
### Image details
| Before | After |
|---|---|
| | |
## Use of AI Tools
N/A
#6
@
6 weeks ago
Confirmed. On the Edit Image screen → Scale tab, the height input and Scale button are not vertically aligned in the New Dimensions row.
Refer below images :
Before Patch :
https://postimg.cc/MnhGY3L7
After Patch :
https://postimg.cc/F7wmtdVj
Patch looks good.
@huzaifaalmesbah commented on PR #12125:
5 weeks ago
#7
Looks Good.
| Before | After |
|---|---|
| | |
@masteradhoc commented on PR #12125:
4 weeks ago
#8
Hey @t-hamano
Thank you very much for this PR. can confirm on edit-media and edit-image the Buttons now are 40px high.
EDIT-MEDIA
EDIT-IMAGE
I think we should go with this approach instead of #12112.
@wildworks commented on PR #12112:
3 weeks ago
#9
Hi @itzmekhokan, thanks for working on this.
Now that #12125 has been approved, I would like to close this pull request.
WP 7 Scale button alignment