Visible horisontal scroll bar

[carolinan]

Describe the bug
At some screen sizes there is a visible horisontal scroll bar.

To Reproduce
Steps to reproduce the behavior:

1. Go to the front of the website
2. Reduce the browser window width to somewhere between 800 and 900px.
3. See the scroll bar

Expected behavior
I expect there to not be a visible horisontal scroll bar.

Screenshots

Device:

• Device: PC
• OS: Windows10
• Browser: Chrome

Additional context
I believe there was a discussion in the Gutenberg GitHub repository about a default "reset" CSS for themes, but
I can't find it now and whatever the result was, it did not include overflow.
Considering adding overflow-x: hidden; to the body element for the front only, in style.css

[kjellr]

@carolinan I'm unable to reproduce this, using the same demo content. Are you able to pinpoint the blocks that are causing this?

[carolinan]

I believe it is the submenu. And looking at the screenshot above, the rightmost menu item has a sub menu.

[kjellr]

Thanks! @jasmussen: as a navigation block expert, is this something you have any insight into?

Since the theme isn't providing any of its own styling, we shouldn't need to fix this on the theme end.

[jasmussen]

I haven't found a good way to share test markup with the recent changes, so I'll try to speak in a bit more general terms about how things should work.

• When submenus are closed, their contents should not take up space which could cause scrollbars.
• When a menu justified left, submenus should open to the right. When justified right, they should open to the left.

At the moment we have no further positioning smarts for which direction a submenu should open in, which means there's a little bit of editorial responsibility present. We also don't have handling in place to ensure endless submenus flipping back and forth to avoid scrollbars — it's complex javascript we'll likely need to address in the future, but for the time being the submenu directional smarts are based on justifications.

However from the screenshots and GIFs (thank you), it appears that the menu is justified right in the first screenshot, yet still opens rightward when it should open left. It even looks as though it takes up space while closed. Both of those would be regressions. I'll take a look, and in the mean time, I hope the above makes sense.

[carolinan]

You can use this PR to get the markup 😄 WordPress/gutenberg#36200

[carolinan]

The first screenshot is a page list that is justified to the right, -the default in the theme.

The gif is the same page list but converted to links using the option in the toolbar, and has no justification.

[jasmussen]

😩 it appears both issues mentioned have regressed. I'll see what I can do.

By the way the order of the page list to menu item conversion is a known issue, I think it might have been ticketed by Kerry Liu. If I recall correctly it is a limitation in the API.

[jasmussen]

I believe I have a fix in WordPress/gutenberg#36215.

[kjellr]

This should be fixed in WordPress/gutenberg#36215. I'm going to close for now, but we can re-open if it pops up again.

[DJviolin]

Horizontal overflow still present in the nightly version: Wordpress v5.9-beta4-52412

The element's route which causing it:

body .wp-site-blocks header .wp-block-group header .wp-block-group .alignwide