Make WordPress Core

#58692 closed defect (bug) (fixed)

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

Reported by: wildworks's profile wildworks Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.3
Component: Media Keywords: has-screenshots has-patch commit
Focuses: ui, css, administration Cc:

Description

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

Attachments (11)

1280.png (707.2 KB) - added by wildworks 16 months ago.
Between about 1201px and 1535px: The Save panel covers the Crop Image section
375.png (204.1 KB) - added by wildworks 16 months ago.
Approx. 440px or smaller: Image canvas and the Crop Image section overflow
58692.diff (619 bytes) - added by mikinc860 16 months ago.
Here I have made changes to the media.css file.
58692.2.diff (619 bytes) - added by mikinc860 16 months ago.
Here I have made changes to the media.css file.
58692.3.diff (619 bytes) - added by mikinc860 16 months ago.
Here I have made changes to the media.css file.
1201X720.png (302.2 KB) - added by mikinc860 16 months ago.
1200X720.png (273.7 KB) - added by mikinc860 16 months ago.
58692.4.diff (1.1 KB) - added by mikinc860 16 months ago.
Responsive issue resolved
58692.5.diff (621 bytes) - added by joedolson 16 months ago.
Switch to flex layout
Screenshot_1.jpg (205.5 KB) - added by mikinc860 16 months ago.
The latest patch and solution looks good to me also. Here I am attaching an screenshot.
58692.6.diff (758 bytes) - added by joedolson 16 months ago.
Add flex-wrap on button containers

Download all attachments as: .zip

Change History (30)

@wildworks
16 months ago

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

@wildworks
16 months ago

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

#1 @sabernhardt
16 months ago

  • Focuses ui css administration added
  • Milestone changed from Awaiting Review to 6.3
  • Version set to trunk

#2 @joedolson
16 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.


16 months ago

#4 @mukesh27
16 months ago

  • Keywords needs-patch added

This ticket was discussed during the bug scrub.

Ticket need patch that solve the issue.

#5 @mikinc860
16 months ago

  • Keywords has-screenshots added

@mikinc860
16 months ago

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

@mikinc860
16 months ago

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

@mikinc860
16 months ago

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

#6 @mikinc860
16 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

@mikinc860
16 months ago

@mikinc860
16 months ago

@mikinc860
16 months ago

Responsive issue resolved

#7 @mikinc860
16 months ago

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

#8 @dhrumilk
16 months ago

  • Keywords has-testing-info added; needs-testing removed

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

#9 @dhrumilk
16 months ago

#58726 was marked as a duplicate.

#10 @audrasjb
16 months ago

#58731 was marked as a duplicate.

#11 @joedolson
16 months ago

  • Keywords commit added

#12 @joedolson
16 months ago

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

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.

#13 @joedolson
16 months ago

  • Keywords commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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
16 months ago

Switch to flex layout

#14 @joedolson
16 months ago

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.

This ticket was mentioned in Slack in #core-media by joedolson. View the logs.


16 months ago

#16 @sabernhardt
16 months ago

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;
}
Last edited 16 months ago by sabernhardt (previous) (diff)

#17 @joedolson
16 months ago

Good call, @sabernhardt - thanks!

@mikinc860
16 months ago

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

@joedolson
16 months ago

Add flex-wrap on button containers

#18 @joedolson
16 months ago

  • Keywords commit added; has-testing-info removed

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

#19 @joedolson
16 months ago

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

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.

Note: See TracTickets for help on using tickets.