Opened 6 hours ago
Last modified 2 minutes ago
#65428 accepted defect (bug)
Scale button not aligned to dimensions on edit image screen.
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | 7.0.1 | Priority: | normal |
| Severity: | normal | Version: | 7.0 |
| Component: | Media | Keywords: | has-patch |
| Focuses: | ui, css | Cc: |
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 (2)
Change History (4)
#1
@
6 hours ago
- Milestone changed from Awaiting Review to 7.0.1
- Owner set to joedolson
- Status changed from new to accepted
This ticket was mentioned in PR #12112 on WordPress/wordpress-develop by @khokansardar.
2 minutes 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
Note: See
TracTickets for help on using
tickets.
WP 7 Scale button alignment