Twenty Twelve: navigation block submenus are cut off

[poena]

When adding a navigation block that has a submenu to a post or page, the submenus are visibly cut off on the front of the site.
I am only able to see and select part of the first level of submenus, the rest are hidden.

The navigation block is affected both by theme styles for the
div element https://core.trac.wordpress.org/browser/branches/6.6/src/wp-content/themes/twentytwelve/style.css#L58

and .site-content nav https://core.trac.wordpress.org/browser/branches/6.6/src/wp-content/themes/twentytwelve/style.css#L421

.site-content nav {
    clear: both;
    line-height: 2;
   overflow: hidden;
}

If I remove the overflow:hidden, the navigation block works.

[poena]

The navigation block with submenus cut off.

[sabernhardt]

Twenty Twelve uses overflow: hidden to clear floats in (at least) the post and comment pagination link nav elements (​committed on GitHub between [20219] and [21261]).

While hiding the overflow clips one side of the focus outline for previous and next links, I'm reluctant to replace the floating or to add an ::after clearfix in a 12-year-old theme.

To adjust for only the Navigation block, the theme's blocks.css could include

nav.wp-block-navigation {
	overflow: visible;
}

[sabernhardt]

Option 1: add an :after pseudo-element to clear the floats instead of overflow: hidden

[sabernhardt]

Option 2: show the overflow on Navigation blocks only, within the .site-content area

[sabernhardt]

61672.clearfix.diff​

• Removes overflow: hidden from any nav elements in the .site-content area.
• Adds an :after pseudo-element (but not :before) to clear the floats for post and comment pagination.
• Sets the width to 1px in case someone added display: flex to either navigation.

61672.blocks.css.diff​ (simpler option)

• Keeps overflow: hidden for nav elements in the .site-content area.
• Overrides overflow: hidden for the Navigation block only.
• Uses .site-content .wp-block-navigation as the selector to reflect the scope of .site-content nav.

[karmatosed]

Thanks everyone. I am going to add testing keywords and see about progressing this forward.

[karmatosed]

My vote is for the simpler version @sabernhardt and I will happily commit it, but wanted to check if you agreed on that. I have tested it.

[sabernhardt]

Yes, 61672.blocks.css.diff​ should be safer.

The clearfix method was worth trying because one side of the focus outline for post and comment navigation links can be cut off, but it has been that way for a long time (and there might be a simpler way of adjusting those by one pixel if we want to pursue that).

[sabernhardt]

previous comments link with focus outline cut off

[karmatosed]

In 58887:

Twenty Twelve: Fixes navigation block submenus being cut off.

The navigation block submenus were being cut off. This is the simpler method proposed in patches.

Props poena, sabernhardt.
Fixes #61672.