Admin Image Editor: Layout is broken in the certain browser width

[wildworks]

Unintended layout collapse seems to occur when the browser width matches one of the following:

• Between about 1201px and 1535px: The Save panel covers the Crop Image section
• Approx. 440px or smaller: Image canvas and the Crop Image section overflow

[wildworks]

Between about 1201px and 1535px: The Save panel covers the Crop Image section

[wildworks]

Approx. 440px or smaller: Image canvas and the Crop Image section overflow

[mukesh27]

This ticket was discussed during the bug scrub.

Ticket need patch that solve the issue.

[mikinc860]

Here I have made changes to the media.css file.

[mikinc860]

Here I have made changes to the media.css file.

[mikinc860]

Here I have made changes to the media.css file.

[mikinc860]

Responsive issue resolved

[mikinc860]

The crop image field types are changed from text to a number so I have added CSS for the number fields.

[dhrumilk]

Test Report

Environment

• Hardware: Dell 12th Gen Intel(R) Core(TM) i5-1240P 1.70 GHz
• OS: Windows 11
• Browser: Chrome 114.0.5735.199
• Server: nginx/1.25.0
• PHP: 8.2.0
• WordPress: 6.3-beta3-56130-src
• Theme: twentytwentythree v1.1

Steps to Reproduce

1. Go to media and edit the media.
2. make browser width larger then the 1201px.
3. check The Save panel covers the Crop Image section.

Expected Results

For the Width larger then 1201px.

• Image section width has been 100%. and The Save panel covers the Crop Image section needs to below the image section.

for the width smaller then 440px.

• Image canvas and the Crop Image section overflow so for that the crop image fields shoud have to be fix into the screen.

When testing a patch to validate it works as expected:

• ✅ Working as well.

Supplemental Artifacts

• Image 1- ​https://www.awesomescreenshot.com/image/41243772?key=b55efec033719d38a97511e9dbec9a1f
• Image 2- ​https://www.awesomescreenshot.com/image/41243771?key=24c647d90438a37f7ae935c78ddaec03

[dhrumilk]

#58726 was marked as a duplicate.

[audrasjb]

#58731 was marked as a duplicate.

[joedolson]

In 56189:

Media: Fix responsive views in image editor

Adjust breakpoints for mid-range responsive views to prevent the save panel from overflowing other sections.

Props wildworks, mikinc860, mukesh27, sabernhardt, dhrumilk.
Fixes #58692.

[joedolson]

This change disrupts the design in some undesirable ways on wide monitors, making the image editing palette considerably wider than the image ever occupies. Reopening and adding new patch to improve this.

[joedolson]

Switch to flex layout

[joedolson]

The patch switches to a flex layout so that items occupy only the space required. This enables the crop & scale tool panels to show next to the image when space allows, which was lost with the previous patch, and uses flex-wrap: wrap so that collisions and overlaps are avoided.

[sabernhardt]

The buttons within each set may need to wrap, too. The problem should be less common with flex on the two sets, but some languages will have buttons too wide to keep in one row at some screen width.

.imgedit-panel-tools > .imgedit-menu {
  flex-wrap: wrap;
}

[joedolson]

Good call, @sabernhardt - thanks!

[mikinc860]

The latest patch and solution looks good to me also. Here I am attaching an screenshot.

[joedolson]

Add flex-wrap on button containers

[joedolson]

Updated patch allows button containers to wrap at small screen sizes.

[joedolson]

In 56242:

Media: Fix admin image editor layout at intermediary widths.

Follow up to [56189], which resolved the initial problem but created new problems with control proximity on wide monitors. Change admin image editor panels to use flex so panels only occupy the space needed.

Props joedolson, sabernhardt, mikinc860.
Fixes #58692.