WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 5 weeks ago

#49375 closed defect (bug) (fixed)

Menu accordion content on small screen doesn't match widths with the accordion handle

Reported by: garrett-eclipse Owned by: audrasjb
Milestone: 5.6 Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots has-patch commit
Focuses: ui, css, administration Cc:

Description

While on half-screen on a laptop I noticed that menu items added to the menu have their accordion display slightly off. Their accordion content is set to a fixed width and it doesn't span the same width as the accordion heading/handle. *Screenshot uploading

Attachments (7)

Screen Shot 2020-02-06 at 12.01.39 AM.png (661.3 KB) - added by garrett-eclipse 10 months ago.
Screenshot illustrating the issue
49375.diff (937 bytes) - added by audrasjb 3 months ago.
Menus: Better support for medium screens in menu items accordions
Capture d’écran 2020-09-10 à 00.48.28.png (226.7 KB) - added by audrasjb 3 months ago.
49375.diff - default
Capture d’écran 2020-09-10 à 00.49.04.png (227.1 KB) - added by audrasjb 3 months ago.
49375.diff - all fields in menu item accordion
Screen Shot 2020-09-09 at 11.14.40 PM.png (40.8 KB) - added by garrett-eclipse 3 months ago.
Overflow issue found during testing.
49375.2.diff (1.5 KB) - added by garrett-eclipse 3 months ago.
Refresh to make the description-[wide/thin] percent based to avoid overflow and ensure consistent space on the right.
2e2f63e7ec2d000e3a0fc4108c1bde8d.mp4 (3.8 MB) - added by audrasjb 2 months ago.

Change History (14)

@garrett-eclipse
10 months ago

Screenshot illustrating the issue

#1 @audrasjb
3 months ago

  • Keywords needs-patch has-screenshots added
  • Milestone changed from Awaiting Review to 5.6
  • Owner set to audrasjb
  • Status changed from new to accepted

Hi Garrett,

I was able to reproduce the issue. Moving to milestone 5.6.

Thanks!

@audrasjb
3 months ago

Menus: Better support for medium screens in menu items accordions

@audrasjb
3 months ago

49375.diff - default

@audrasjb
3 months ago

49375.diff - all fields in menu item accordion

#2 @audrasjb
3 months ago

  • Keywords has-patch added; needs-patch removed

49375.diff is a first approach, based on fixed max-width for the two containers.

@garrett-eclipse
3 months ago

Overflow issue found during testing.

@garrett-eclipse
3 months ago

Refresh to make the description-[wide/thin] percent based to avoid overflow and ensure consistent space on the right.

#3 @garrett-eclipse
3 months ago

  • Keywords needs-testing added

Thanks for the patch @audrasjb testing I found the inputs spilled beyond the bounds. I initially was going to use max-width there as well but found it left inconsistent padding on the right depending if it's percent or px based that's in effect. Along with those changes I fixed some minor css coding standards providing a space between the selector and the opening { brace.

#4 @audrasjb
2 months ago

  • Keywords commit added; needs-testing removed

@garrett-eclipse your last patch looks perfect to me! Thanks!
Marking this for commit as it's now tested against each endpoint 👊

(see video above, but I also tested on a real tablet to get intermediate views)

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


5 weeks ago

#6 @helen
5 weeks ago

In 49346:

Menus: Better responsive display for accordion items.

This only applies to the standalone menu screen; fixes for the customizer will be handled separately.

Props audrasjb, garrett-eclipse.
See #49375.

#7 @helen
5 weeks ago

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

Closing this as fixed, customizer improvements will be tracked in #51647.

Note: See TracTickets for help on using tickets.