Skip to content

fix(loading-overlay): raise tooltip z-index above backdrop #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hoangsonww merged 2 commits into from
May 23, 2026
+7 −2
Merged

fix(loading-overlay): raise tooltip z-index above backdrop #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01a68f6
fix(loading-overlay): raise tooltip z-index above backdrop
claude May 23, 2026
cd2cb01
Revise README for improved clarity and presentation
hoangsonww May 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .github/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# **Budget Management API - A Comprehensive, Microservices-Based API for Managing Budgets, Expenses, Users, and More! 💰**
# **Budget Management API** 💰

**_A Comprehensive, Microservices-Based API for Managing Budgets, Expenses, Users, and So Much More!_**

**Welcome to the Budget Management API**, a robust, **microservices** backend platform for managing budgets, expenses, users, orders, and notifications. Built with **Node.js**, **Express**, and **TypeScript**, it supports advanced features like **GraphQL**, **gRPC**, **WebSockets**, and **REST APIs**.

Expand Down
5 changes: 4 additions & 1 deletion frontend/src/components/LoadingOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,10 @@ function LoadingOverlay({ loading, longLoadMs = LONG_LOAD_MS, coldStartMs = COLD
enterTouchDelay={0}
leaveTouchDelay={6000}
title={FREE_TIER_INFO}
componentsProps={{
slotProps={{
popper: {
sx: { zIndex: 10000 },
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

},
Comment on lines +98 to +101
tooltip: {
sx: { fontSize: 12, maxWidth: 320, lineHeight: 1.5, p: 1.25 },
},
Expand Down
Loading