Make WordPress Core

Opened 5 months ago

Closed 5 months ago

#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 5 months ago.
Between about 1201px and 1535px: The Save panel covers the Crop Image section
375.png (204.1 KB) - added by wildworks 5 months ago.
Approx. 440px or smaller: Image canvas and the Crop Image section overflow
58692.diff (619 bytes) - added by mikinc860 5 months ago.
Here I have made changes to the media.css file.
58692.2.diff (619 bytes) - added by mikinc860 5 months ago.
Here I have made changes to the media.css file.
58692.3.diff (619 bytes) - added by mikinc860 5 months ago.
Here I have made changes to the media.css file.
1201X720.png (302.2 KB) - added by mikinc860 5 months ago.
1200X720.png (273.7 KB) - added by mikinc860 5 months ago.
58692.4.diff (1.1 KB) - added by mikinc860 5 months ago.
Responsive issue resolved
58692.5.diff (621 bytes) - added by joedolson 5 months ago.
Switch to flex layout
Screenshot_1.jpg (205.5 KB) - added by mikinc860 5 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 5 months ago.
Add flex-wrap on button containers

Download all attachments as: .zip

Change History (30)

@wildworks
5 months ago

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

@wildworks
5 months ago

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

#1 @sabernhardt
5 months ago

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

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


5 months ago

#4 @mukesh27
5 months ago

  • Keywords needs-patch added

This ticket was discussed during the bug scrub.

Ticket need patch that solve the issue.

#5 @mikinc860
5 months ago

  • Keywords has-screenshots added

@mikinc860
5 months ago

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

@mikinc860
5 months ago

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

@mikinc860
5 months ago

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

#6 @mikinc860
5 months ago

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

@mikinc860
5 months ago

@mikinc860
5 months ago

@mikinc860
5 months ago

Responsive issue resolved

#7 @mikinc860
5 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
5 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
5 months ago

#58726 was marked as a duplicate.

#10 @audrasjb
5 months ago

#58731 was marked as a duplicate.

#11 @joedolson
5 months ago

  • Keywords commit added

#12 @joedolson
5 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
5 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
5 months ago

Switch to flex layout

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


5 months ago

#16 @sabernhardt
5 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 5 months ago by sabernhardt (previous) (diff)

#17 @joedolson
5 months ago

Good call, @sabernhardt - thanks!

@mikinc860
5 months ago

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

@joedolson
5 months ago

Add flex-wrap on button containers

#18 @joedolson
5 months ago

  • Keywords commit added; has-testing-info removed

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

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