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