nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.96k stars 494 forks source link

[Toast] z-index #2404

Open malte-baumann opened 1 day ago

malte-baumann commented 1 day ago

For what version of Nuxt UI are you asking this question?

v3-alpha

Description

I have labelled it as a question, it could be a bug, but I will let you decide.

It seems like the Toast component has not a high enough z-index to be above everything. (Should it?) I took notice when using the Drawer but I guess (not tested) it applies i.e. to the Slideover as well. The Toast Message has appeared under the Drawer so the user cannot see it. Imo the toast should be above everything. Both Drawer and Toast have a z-index of 100 if I saw that correctly. I tried to change the z-index inside the Toastproperties but that doesn't seem to have an effect.

I worked around and just put the Toast in another corner so the user can see it but still is unable to interact with it because the Drawer will close if he clicks outside.

But maybe there is another way to deal with this?

AaronDewes commented 1 day ago

This also seems to happen with an open <UModal>, the toast should be above that as well.