OpenLab Mobile Menus overflow container

[beckej13820]

On OpenLab, the mobile menu texts overflow the background container. I've confirmed on a site running the latest version of OpenLab and also cboxopenlab.org

Here's a screenshot of cboxopenlab.org

I think the cause is an !important rule that sets the width at 101%

@media (max-width: 767px) .oplb-bs #wpadminbar #wp-toolbar .ab-sub-wrapper { background: transparent; left: -1%; right: 0; top: 1px; width: 101% !important; border: none; border-radius: 0; margin: 0;

When we remove that rule, or set it to 200%, it looks better.

[beckej13820]

I'm actually having a harder time reproducing this than I thought. There's one more piece that may help track this down.

The menu seems to overflow on the latest version of openlab when you aren't logged in, but be fine when you are logged in.

[boonebgorges]

Thanks for the helpful debugging, @beckej13820 . I looked back through the history of openlab-theme and also the originating OpenLab codebase to understand why this style was introduced. I can't find any specific information on either the width declaration or the !important flag, but I did see that it dates back a number of years (see eg https://github.com/openlab-at-city-tech/openlab/commit/1b60203ea392f28964eea2d111e9ffd2d8bb00f8) and thus it might have been necessary on an older implementation of the WP toolbar.

I've removed the width declaration and it seems to look fine across different devices.

[bree-z]

This looks good to me, thanks!