[v3] Toaster gets rendered behind Slideover's and Modal's overlays

[sandros94]

Environment

N/A

Is this bug related to Nuxt or Vue?

Nuxt

Version

commit: 64b703d

Reproduction

<template>
  <div>
    <USlideover side="left">
      <UButton label="Open Slideover" color="neutral" variant="subtle" />
      <template #content>
        <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
      </template>
    </USlideover>

    <br>

    <UModal>
      <UButton label="Open Modal" color="neutral" variant="subtle" />
      <template #content>
        <UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
      </template>
    </UModal>
  </div>
</template>

<script setup lang="ts">
const toast = useToast()

function showToast() {
  toast.add({
    title: 'Test',
    duration: 60 * 1000
  })
}
</script>

Description

Following #2404 resolved via b0be26d

While a Slideover or Modal are open trigger a Toaster and try to interact with it.

20241114-2004-29.4998241.mp4

[sandros94]

Couple things I've noticed:

1. Interestingly, there is already a z-[100] on the ToastViewport
2. just for fun I added a -z-50 to both slideover's and modal's overlays. They do render behind everything, but still capture the click and prevent any interaction with the toast