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

[garrett-eclipse]

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

[garrett-eclipse]

Screenshot illustrating the issue

[audrasjb]

Hi Garrett,

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

Thanks!

[audrasjb]

Menus: Better support for medium screens in menu items accordions

[audrasjb]

49375.diff - default

[audrasjb]

49375.diff - all fields in menu item accordion

[audrasjb]

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

[garrett-eclipse]

Overflow issue found during testing.

[garrett-eclipse]

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

[garrett-eclipse]

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.

[audrasjb]

@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)

[helen]

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.

[helen]

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