Make WordPress Core

Opened 4 months ago

Last modified 4 months ago

#58979 new defect (bug)

Layout breaking while editing an Image from "Image Details Edit" screen.

Reported by: deepakvijayan's profile deepakvijayan Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3
Component: Media Keywords: needs-patch
Focuses: ui, css, administration Cc:


Bug Report


The layout is breaking while editing an Image from "Image Details Edit" screen.


  • WordPress: 6.3-RC3
  • PHP: 7.4.12
  • Server: Apache/2.4.46 (Unix) OpenSSL/1.0.2u PHP/7.4.12 mod_wsgi/3.5 Python/2.7.13 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.11 Perl/v5.30.1
  • Database: mysqli (Server: 5.7.32 / Client: mysqlnd 7.4.12)
  • Browser: Chrome (macOS)
  • Theme: Twenty Twenty-Three 1.2
  • MU-Plugins: None activated
  • Plugins:
    • WordPress Beta Tester 3.5.2

Steps to Reproduce

  1. Open Media -> Library
  2. Select an Image
  3. Click the "Edit Image" button below the Image
  4. Click "Crop Image". Crop settings are visible to the right of the Image
  5. Now Click "Scale Image". Layout breaks.
  6. 🐞 Bug occurs.

Expected Results

  1. ✅ Layout Should not break. At the very least, it should be consistent for scale and crop.

Actual Results

  1. ❌ Layout breaks and lack of consistency.

I am attaching Screenshots for reference.

Attachments (3)

01. With Crop Active.png (256.1 KB) - added by deepakvijayan 4 months ago.
02. With Crop & Scale Active (Without scrolling to bottom).png (245.1 KB) - added by deepakvijayan 4 months ago.
03. With Crop & Scale Active.png (248.1 KB) - added by deepakvijayan 4 months ago.

Download all attachments as: .zip

Change History (7)

#1 @deepakvijayan
4 months ago

  • Focuses performance removed
  • Keywords needs-patch added

#2 @huzaifaalmesbah
4 months ago

You've raised a valid point. I think showing the scale button as a block element would be advantageous. The main problem lies in the "imgedit-settings" class, where the max-width is set to 400px. If we change it to 250px, the issue will be resolved.

.imgedit-settings {
    max-width: 250px;

.image-editor .imgedit-scale-controls .button {
    margin-top: 0.3077em;
    display: block;

Last edited 4 months ago by huzaifaalmesbah (previous) (diff)

#3 @kebbet
4 months ago

  • Focuses administration added; javascript template removed
  • Severity changed from major to normal

This ticket was mentioned in Slack in #core by priethor. View the logs.

4 months ago

Note: See TracTickets for help on using tickets.