Assembler: Tall drop down menus overflow the container and are clipped

[mrfoxtalbot]

Quick summary

The main menu is nested inside a cover block that is site as overflow:hidden.

If enough drop-down menus are added to the main menu, they will overflow and become invisible & unreachable.

Here's a video:

Kapture.2024-06-04.at.11.10.28.mp4

Adding this CSS fixes the issue (but it might be too generic and affect cover blocks elsewhere). Perhaps we could use .wp-site-blocks > .wp-block-cover:has(.wp-block-navigation__submenu-container) to increase specificity:

.wp-site-blocks > .wp-block-cover {
  overflow:visible 
}

After adding this code, the dropdown is no longer constrained by the cover block's height:

Context: 8268355-zd-a8c

Steps to reproduce

1. Activate Assembler
2. Set up a header that includes a cover.
3. Add enough items to a submenu to make it overflow.

What you expected to happen

All items should remain visible.

What actually happened

Submenu items were clipped.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8268355-zen

[rickmgithub]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

1. Install the Assembler theme on an AT site
2. Add a cover block to the header and insert an image
3. Then add a menu into the cover block
4. Add items in a submenu so they appear as a drop down. You need to add enough items that it stretches over the bottom of the cover block
5. Notice how the menu is clipped.

Screenshare
https://github.com/Automattic/themes/assets/13706336/42a01528-0221-4d7b-8489-f91fa4036430

📌 ACTIONS

Triaged

[richtabor]

I'm marking this as a duplicate of WordPress/gutenberg#45353. This is not Assembler-related.

Also reported via Calypso here.