From a46976decd0fe3b576fa31d6686e98fa135745bc Mon Sep 17 00:00:00 2001
From: Ubbe <hi@ubbe.dev>
Date: Mon, 8 Dec 2025 17:29:14 +0700
Subject: [PATCH] fix(frontend): allow to close toasts (#11550)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 <122007096+Abhi1992002@users.noreply.github.com>
---
 .../src/components/molecules/Toast/styles.module.css      | 8 ++++++++
 .../frontend/src/components/molecules/Toast/toaster.tsx   | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/components/molecules/Toast/styles.module.css b/autogpt_platform/frontend/src/components/molecules/Toast/styles.module.css
index d1daaaa88b..ec8271958f 100644
--- a/autogpt_platform/frontend/src/components/molecules/Toast/styles.module.css
+++ b/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;
+}
diff --git a/autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx b/autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
index d99ef37b07..adb88831af 100644
--- a/autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
+++ b/autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
@@ -1,7 +1,7 @@
 "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() {
@@ -9,6 +9,7 @@ export function Toaster() {
     <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" />,