Make WordPress Core

Opened 2 years ago

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

Download all attachments as: .zip

Change History (30)

@wildworks
2 years ago

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

@wildworks
2 years ago

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

#1 @sabernhardt
2 years ago

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

#2 @joedolson
2 years ago

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

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


2 years ago

#4 @mukesh27
2 years ago

  • Keywords needs-patch added

This ticket was discussed during the bug scrub.

Ticket need patch that solve the issue.

#5 @mikinc860
2 years ago

  • Keywords has-screenshots added

@mikinc860
2 years ago

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

@mikinc860
2 years ago

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

@mikinc860
2 years ago

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

#6 @mikinc860
2 years ago

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

@mikinc860
2 years ago

@mikinc860
2 years ago

@mikinc860
2 years ago

Responsive issue resolved

#7 @mikinc860
2 years ago

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

#8 @dhrumilk
2 years 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
2 years ago

#58726 was marked as a duplicate.

#10 @audrasjb
2 years ago

#58731 was marked as a duplicate.

#11 @joedolson
2 years ago

  • Keywords commit added

#12 @joedolson
2 years 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
2 years 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
2 years ago

Switch to flex layout

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


2 years ago

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

#17 @joedolson
2 years ago

Good call, @sabernhardt - thanks!

@mikinc860
2 years ago

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

@joedolson
2 years ago

Add flex-wrap on button containers

#18 @joedolson
2 years ago

  • Keywords commit added; has-testing-info removed

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

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