Blocks: Web Stories blocks conflicts with theme's menu behavior on mobile

[LuckynaSan]

Bug Description

The Web Stories block interferes with the burger menu of a default WordPress theme on mobile view.
The burger menu does not expand when clicking on it. After scrolling to the bottom of the page, and back up to the menu icon the menu behaves as expected.

*Noting that when only a single Web Story was embedded the issue did not occur. Once you add a handful of latest stories, the issue occurs. Unsure if this affects other themes.

Expected Behaviour

For the Theme's burger menu to work when Web Stories blocks are inserted on the page.

Steps to Reproduce

1. Activate WordPress Twenty Twenty Three theme
2. Insert Web Stories blocks (more than one story)
3. View page on physical mobile device
4. Click on top right corner burger menu
5. Notice inactivity
6. Scroll down the page
7. Scroll back up to the burger menu
8. Click on menu > notice it expands

Additional Context

User Report: https://wordpress.org/support/topic/webstories-plugin-breaking-block-theme-menus-on-mobile-devices/#post-17400665

• Plugin Version: 1.35
• WordPress Version: 6.4.3
• Operating System: iOS / iPhone 15 Pro
• Browser: Safari

[swissspidy]

Thanks for filing this user report! 👍

I can reproduce this. Seems to be caused by the following CSS which displays the lightbox seemingly out of viewport with 0 opacity, but yet it overlaps the content, thus causing the menu button to not work.

web-stories-wp/packages/stories-block/src/css/lightbox.css

Lines 7 to 19 in eba3b68

	.web-stories-list__lightbox,
	.web-stories-singleton__lightbox {
	justify-content: center;
	align-items: center;
	position: fixed;
	background: black;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translate(0, -100vh);
	}

@AnuragVasanwala Would be great if you could look into this one

[AnuragVasanwala]

@swissspidy Absolutely! Will have a look and fix it.