fix(frontend): allow to close toasts (#11550)

## Changes 🏗️

<img width="795" height="275" alt="Screenshot 2025-12-04 at 21 05 55"
src="https://github.com/user-attachments/assets/e7572635-3976-4822-89ea-3e5e26196ab8"
/>

Allow to close toasts 🍞 

## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Run Storybook locally
  - [x] Toast have a close button top-right

---------

Co-authored-by: Abhimanyu Yadav <[email protected]>

Author: 0ubbe

autogpt_platform/frontend/src/components/molecules/Toast/styles.module.css

@@ -37,3 +37,11 @@ html body .toastDescription {
   font-size: 0.75rem !important;
   line-height: 1.25rem !important;
 }
+
+/* Position close button on the right */
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+#root [data-sonner-toast] [data-close-button="true"] {
+  left: unset !important;
+  right: -18px !important;
+  top: -3px !important;
+}

autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx

@@ -1,14 +1,15 @@
 "use client";
 
+import { CheckCircle, Info, Warning, XCircle } from "@phosphor-icons/react";
 import { Toaster as SonnerToaster } from "sonner";
-import { CheckCircle, XCircle, Warning, Info } from "@phosphor-icons/react";
 import styles from "./styles.module.css";
 
 export function Toaster() {
   return (
     <SonnerToaster
       position="bottom-center"
       richColors
+      closeButton
       toastOptions={{
         classNames: {
           toast: styles.toastDefault,
@@ -20,6 +21,7 @@ export function Toaster() {
           info: styles.toastInfo,
         },
       }}
+      className="custom__toast"
       icons={{
         success: <CheckCircle className="h-4 w-4" color="#fff" weight="fill" />,
         error: <XCircle className="h-4 w-4" color="#fff" weight="fill" />,