Make WordPress Core

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: muryam's profile muryam Owned by: joedolson's profile joedolson
Milestone: 7.0.1 Priority: normal
Severity: normal Version: 7.0
Component: Media Keywords: has-patch
Focuses: ui, css Cc:

Attachments (2)

WP 7 button alignment.png (96.2 KB) - added by muryam 6 hours ago.
WP 7 Scale button alignment
Scale in 6.9 version.png (70.5 KB) - added by muryam 6 hours ago.
Scale button in 6.9 Version

Download all attachments as: .zip

Change History (4)

@muryam
6 hours ago

WP 7 Scale button alignment

@muryam
6 hours ago

Scale button in 6.9 Version

#1 @joedolson
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 .button applies 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-controls and 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-height magic 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.