Make WordPress Core

Opened 10 months ago

Last modified 38 hours ago

#58979 accepted defect (bug)

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

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

Description

Bug Report

Description

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

Environment

  • 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 114.0.0.0 (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 10 months ago.
02. With Crop & Scale Active (Without scrolling to bottom).png (245.1 KB) - added by deepakvijayan 10 months ago.
03. With Crop & Scale Active.png (248.1 KB) - added by deepakvijayan 10 months ago.

Download all attachments as: .zip

Change History (10)

#1 @deepakvijayan
10 months ago

  • Focuses performance removed
  • Keywords needs-patch added

#2 @huzaifaalmesbah
10 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 10 months ago by huzaifaalmesbah (previous) (diff)

#3 @kebbet
10 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.


10 months ago

#5 @joedolson
5 weeks ago

  • Milestone changed from Awaiting Review to 6.6
  • Owner set to joedolson
  • Status changed from new to accepted

Related: #58794

This ticket was mentioned in PR #6619 on WordPress/wordpress-develop by @khokansardar.


38 hours ago
#6

  • Keywords has-patch added; needs-patch removed

Fix layout is breaking while editing an Image from "Image Details Edit" screen on scale and cropping.

Trac ticket: #58979

#7 @khokansardar
38 hours ago

  • Keywords needs-testing added
Note: See TracTickets for help on using tickets.