fix: make sure toast is always on top of modals

Author: nsarrazin

src/lib/components/Toast.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
-
+	import Portal from "./Portal.svelte";
 	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
 
 	interface Props {
@@ -10,14 +10,16 @@
 	let { message = "" }: Props = $props();
 </script>
 
-<div
-	transition:fade|global={{ duration: 300 }}
-	class="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
->
+<Portal>
 	<div
-		class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+		transition:fade|global={{ duration: 300 }}
+		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
 	>
-		<IconDazzled classNames="text-2xl mr-2" />
-		<h2 class="max-w-2xl font-semibold">{message}</h2>
+		<div
+			class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+		>
+			<IconDazzled classNames="text-2xl mr-2" />
+			<h2 class="max-w-2xl font-semibold text-gray-800 dark:text-gray-200">{message}</h2>
+		</div>
 	</div>
-</div>
+</Portal>