Make WordPress Core

Opened 11 months ago

Closed 4 weeks ago

Last modified 4 weeks ago

#58979 closed defect (bug) (fixed)

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 commit
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 (7)

01. With Crop Active.png (256.1 KB) - added by deepakvijayan 11 months ago.
02. With Crop & Scale Active (Without scrolling to bottom).png (245.1 KB) - added by deepakvijayan 11 months ago.
03. With Crop & Scale Active.png (248.1 KB) - added by deepakvijayan 11 months ago.
58979-at-1420px.png (81.4 KB) - added by joedolson 4 weeks ago.
Screenshot after patch at 1420px
58979-at-1120px.png (57.4 KB) - added by joedolson 4 weeks ago.
Screenshot after patch at 1120px
58979-scale-warning.png (363.3 KB) - added by joedolson 4 weeks ago.
Screenshot of scale warning after patch
58979-scale-warning-before.png (338.0 KB) - added by joedolson 4 weeks ago.
Screenshot of scale warning with CSS patch but without HTML change.

Download all attachments as: .zip

Change History (18)

#1 @deepakvijayan
11 months ago

  • Focuses performance removed
  • Keywords needs-patch added

#2 @huzaifaalmesbah
11 months ago

You've raised a valid point. I believe that displaying the scale button as a block would be beneficial.

Version 0, edited 11 months ago by huzaifaalmesbah (next)

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


11 months ago

#5 @joedolson
2 months 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.


4 weeks 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
4 weeks ago

  • Keywords needs-testing added

@joedolson
4 weeks ago

Screenshot after patch at 1420px

@joedolson
4 weeks ago

Screenshot after patch at 1120px

#8 @joedolson
4 weeks ago

  • Keywords commit added; needs-testing removed

This patch expands the side-by-side visibility of the edit panel inside two breakpoints, making the change in layout more predictable and a better match for expectations.

Previously, the edit panel dropped below between as 1200px and 1494px viewport and below 1195px.

Now, the edit panel drops between 1200px and 1402px, then below 1102px.

This looks good; marking for commit.

@joedolson
4 weeks ago

Screenshot of scale warning after patch

@joedolson
4 weeks ago

Screenshot of scale warning with CSS patch but without HTML change.

#9 @joedolson
4 weeks ago

Added screenshots to show the reason for the HTML nesting change in the patch.

#10 @joedolson
4 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 58214:

Media: Improve scale/crop layout in image editor medium breakpoints.

Adjust the max-width of the image edit settings panel so that reflow handling at intermediary breakpoints is more consistent and less fragile.

Props deepakvijayan, huzaifaalmesbah, joedolson, khokansardar.
Fixes #58979.

@joedolson commented on PR #6619:


4 weeks ago
#11

In r58214

Note: See TracTickets for help on using tickets.