Full-screen embedded maps appear behind header. Help?

Question

I have an experience builder site with several embedded web maps. When the user selects the full-screen option, the map expands to full screen, but it gets tucked behind the header. This makes it impossible to see and/or click the buttons at the top of the web map. My organization standardizes the layouts of the maps, so I really don't want to move the buttons as a workaround. The header is pinned to the top of the page so it stays there when the user scrolls through the site.

I've played around with everything, but I can't seem to correct it. Is there a way to fix this? Thanks.

MackenzieCope · Answer

@TonghuiMing I was able to reproduce the issue on a simple scrolling page with a map in a row element. In the tablet/mobile testing environment, using the fullscreen option on the map, the header stays and covers up the top portion of the map. This doesn't happen on a desktop testing environment.

Try it here: https://experience.arcgis.com/experience/53420c45c903430285743c8ebe99d693/

Header settings:

TonghuiMing · Answer

@MackenzieCope Thanks for the screenshots. Telling from those, I assume this has something to do with a grid layout + Map widget fullscreen function.

I want to create an app with a similar layout but am not able to reproduce the actual thing. Anyone could share a reproducible app? Thanks.

MichaelGaiggEsri · Answer

Thank you for your response. I was able to reproduce the issue on mobile resolutions, this appears to be a bug in the product and I'll forward to the product team.