Notifications are displayed behind modal windows when there are a lot of layered components on the page

[vasilii-kovalev]

Description

Some components create layers, like dropdowns, tooltips, or modal windows. When a layer is created, its z-index is calculated according to this formula and then passed to the component that then uses it (in style property, for example).

The problem is, the notifications (and Snackbar) don't use that z-index and instead have a hardcoded value of 100500.
When there are a lot of components/elements on the page that create a layer (for example, a table with a lot of cells with dropdowns/tooltips in them) and the user opens a modal window, the modal window may have a z-index bigger than 100500, and the notifications that should be displayed as a result of actions within the modal window are displayed behind the modal window, which has a negative impact on the user experience.

Ideally, there should not be any hardcoded value, and the notifications (and/or Snackbar) should use the dynamic z-index from the layout context.

Steps to Reproduce

I've created the following example:

• Cell count input manages the cell count. By default it is 1000. According to calculations (see the mentioned formula below), that issue should always be reproducible with a cell count >= 985 (though sometimes it is reproducible with lesser number)
• Table displays the grid of cells, whose number matches the cell count from the input. Each row has 25 columns to avoid cluttering
• Each cell contains a button with a cell number. On hover, a tooltip appears. On click, a modal window is opened
• The modal window contains a "Show notification" button. On click, a notification appears

1. Open this CodeSandbox
2. Hover over any cell in the table
3. Click on any cell
4. Click on the "Show notification" button in the modal window
5. Observe how the notification is displayed (in front of or behind the modal window blocker)
6. Close both modal window and notification, change the number of cells in the input to 300, and repeat steps 2-5

Actual result

With 1000 cells, the notification is displayed behind the modal window.
With 300 cells, the notification is displayed in front of the modal window.

Expected result

In both cases, the notification is displayed in front of the modal window.

[JuliaMV]

Released in 6.5.0