fix: mount toaster to portalRoot to show on top of modals

Author: ytkimirti

bun.lockb

@@ -36,6 +36,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-portal": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",

package.json

@@ -1,3 +1,6 @@
+import { Portal } from "@radix-ui/react-portal"
+
+import { portalRoot } from "@/lib/portal-root"
 import {
   Toast,
   ToastClose,
@@ -12,18 +15,20 @@ export function Toaster() {
   const { toasts } = useToast()
 
   return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
-      <ToastViewport />
-    </ToastProvider>
+    <Portal container={portalRoot}>
+      <ToastProvider>
+        {toasts.map(({ id, title, description, action, ...props }) => (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        ))}
+        <ToastViewport />
+      </ToastProvider>
+    </Portal>
   )
 }