Opened 16 months ago
Closed 16 months ago
#58692 closed defect (bug) (fixed)
Admin Image Editor: Layout is broken in the certain browser width
Reported by: | wildworks | Owned by: | 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)
Change History (30)
#1
@
16 months ago
- Focuses ui css administration added
- Milestone changed from Awaiting Review to 6.3
- Version set to trunk
This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.
16 months ago
#4
@
16 months ago
- Keywords needs-patch added
This ticket was discussed during the bug scrub.
Ticket need patch that solve the issue.
#7
@
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
@
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
- Go to media and edit the media.
- make browser width larger then the 1201px.
- 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
#13
@
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.
#14
@
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
@
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; }
@
16 months ago
The latest patch and solution looks good to me also. Here I am attaching an screenshot.
Between about 1201px and 1535px: The Save panel covers the Crop Image section