How can I globally add a margin/padding to Toasts ?

[Gonzalo-Bruna]

Description

Hi! I’m developing a mobile app using Nuxt UI, and I’ve run into an issue with safe areas. Currently, Toasts don’t account for safe areas (they don't have to), so they end up overlapping notches and camera cutouts.

Is there a way to add global margin or padding to all toasts so they display correctly? I already have the necessary safe area values available as Tailwind CSS classes, I just need to know where to apply them.

Thanks in advance!

[HugoRCD]

You can use app.config.ts

https://ui.nuxt.com/components/toast#theme

[Gonzalo-Bruna]

Should I add it the root slot? I don't know exactly what I need to change to make it work.

[HugoRCD]

@Gonzalo-Bruna Sorry I gave you the wrong thing here's how you can add margin for example

[Gonzalo-Bruna]

That's awesome, thank you very much!