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

[deepakvijayan]

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.

[huzaifaalmesbah]

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;
}

[joedolson]

Related: #58794

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

Trac ticket: #58979

[joedolson]

Screenshot after patch at 1420px

[joedolson]

Screenshot after patch at 1120px

[joedolson]

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]

Screenshot of scale warning after patch

[joedolson]

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

[joedolson]

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

[joedolson]

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.

In r58214