fix(loading-overlay): raise tooltip z-index above backdrop#32
Conversation
MUI Tooltip's Popper portals to body with z-index 1500, which renders beneath the overlay's 9999 backdrop — the free-tier explainer was appearing behind the blur. Pin the popper's z-index to 10000. Co-authored-by: David Nguyen <hoangson091104@gmail.com>
hoangsonww
added
documentation
✅ Deploy Preview for budget-management-system canceled.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the LoadingOverlay component by migrating componentsProps to slotProps and adding a specific zIndex to the popper. The review feedback highlights that the hardcoded zIndex value of 10000 is a magic number and suggests using a shared constant or the theme's z-index scale to ensure better maintainability and avoid stacking conflicts.
| componentsProps={{ | ||
| slotProps={{ | ||
| popper: { | ||
| sx: { zIndex: 10000 }, |
There was a problem hiding this comment.
The z-index value 10000 is a magic number. While it correctly ensures the tooltip appears above the backdrop (which is set to 9999 at line 63), hardcoding these values can lead to 'z-index wars' and maintenance challenges as the application grows. Consider defining a shared constant for the overlay's base z-index and deriving related values from it, or using the theme's z-index scale to manage stacking orders more predictably.
Updated the README to enhance the project description and formatting. Signed-off-by: dav nguyxn <hoangson091104@gmail.com>
github-project-automation
Bot
moved this to Done
in Budget Management API Project Board
There was a problem hiding this comment.
Pull request overview
Adjusts the loading overlay’s tooltip layering so the free-tier explainer renders above the overlay backdrop while the app is in a loading state.
Changes:
- Updates the MUI
Tooltipconfiguration to set the Popperz-indexabove the overlay backdrop. - Migrates the tooltip customization from
componentsPropstoslotPropswhile adding the popper styling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| slotProps={{ | ||
| popper: { | ||
| sx: { zIndex: 10000 }, | ||
| }, |
MUI Tooltip's Popper portals to body with z-index 1500, which renders beneath the overlay's 9999 backdrop — the free-tier explainer was appearing behind the blur. Pin the popper's z-index to 10000.