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:

https://github.com/Automattic/themes/assets/4452464/1d84262c-4944-4ce1-8493-948cd0644dfc

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[bot]]

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