Devtools UI blocks mantine Notification

[marthacryan]

This is the app that I used to test this:

from dash import Dash, html, Input, Output, dcc
import dash_mantine_components as dmc
from dash_iconify import DashIconify

# external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__)
import dash_mantine_components as dmc
from dash import Output, Input, html, callback

"""
Add Notifications to your app layout.
"""

app.layout = dmc.MantineProvider(
    [
        dmc.NotificationProvider(),
        html.Div(id="notifications-container"),
        dmc.Button("Show Notification", id="notify"),
    ]
)

@callback(
    Output("notifications-container", "children"),
    Input("notify", "n_clicks"),
    prevent_initial_call=True,
)
def show(n_clicks):
    return dmc.Notification(
        title="Hey there!",
        id="simple-notify",
        action="show",
        autoClose=False,
        position="bottom-right",
        message="Notifications in Dash, Awesome!",
        icon=DashIconify(icon="ic:round-celebration"),
    )



if __name__ == '__main__':
    app.run(debug=True)

I tried changing the z-index for the devtools, but it appears that the dmc Notification component uses position static, which means that it ignores z-index. Not sure what the solution is for that! If we switch to a footer for the devtools then this issue can be closed