Header z-index fix

[nick-nlb]

Issue

b/525123954

Description

This PR fixes a z-index layering issue where page-level loading spinner screens render on top of the main website header and its dropdown menu.

When a visualization tool (Map, Timeline, Scatter, Download, or StatVar Explorer) enters a loading state, the spinner covers the header dropdown menu, making its contents unclickable.

To fix this, we increased the z-index of the fixed header components to 1000, positioning them above the loading spinner screens (z-index: 100) while keeping them below modals and backdrop layers:

Notes

Setting the container z-index to 1000 matches the z-index level of the header drawer and desktop rich menus. They will renderabove content/spinners, but will still be correctly covered by modal backdrops when modals are open.

Testing

1. Start the local server and go to the Map Explorer: http://localhost:8080/tools/map.
2. Select a variable or trigger a place change to show the loading spinner.
3. While the spinner is active, click to open the header menu.
4. Verify that the dropdown menu is visible on top of the spinner and that the header links are clickable.
5. Check other tools (Timeline, Scatter, etc.) and the Explore page to ensure consistent behavior.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses a UI layering issue where loading spinners in visualization tools were obscuring the website header and its dropdown menus. By elevating the header's z-index, the changes ensure that navigation remains accessible during data loading states without interfering with modal display logic.

Highlights

• Header Z-Index Adjustment: Increased the z-index of the main website header components to 1000 to ensure they remain interactive and visible above loading spinner overlays.
• Consistent Layering: Aligned the header's z-index with existing drawer and rich menu components to maintain proper stacking order relative to modal backdrops.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize the Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counterproductive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request updates the z-index values to 1000 in both core.scss and explore.scss. The reviewer suggests avoiding hardcoded magic numbers by defining a centralized z-index variable in a shared variables file to improve maintainability and prevent layering conflicts.

[juliawu]

Thank you for the fix!

[Suggestion] It might be nice to add a comment here that the z-index needs to be above the loading spinner screens but below the modals