From 1065fe519cac6de99da83816841703254ef00cfb Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 17 Jun 2026 17:50:13 +0800
Subject: [PATCH] fix: toast long error message may caused not show all
 (#37581)

---
 .../dify-ui/src/toast/__tests__/index.spec.tsx | 18 ++++++++++++++++++
 packages/dify-ui/src/toast/index.tsx           |  6 +++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/dify-ui/src/toast/__tests__/index.spec.tsx b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
index 7e9227e362..9560d6fbf2 100644
--- a/packages/dify-ui/src/toast/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/toast/__tests__/index.spec.tsx
@@ -100,6 +100,24 @@ describe('@langgenius/dify-ui/toast', () => {
     expect(document.body.querySelector('[aria-hidden="true"].i-ri-information-2-fill')).not.toBeInTheDocument()
   })
 
+  it('should wrap long unbroken toast content within the card width', async () => {
+    const screen = await render(<ToastHost />)
+    const longTitle = 'operation error S3: PutObject, exceeded maximum number of attempts, 3, StatusCode: 0, RequestID: , HostID: , request send failed'
+    const longDescription = 'Put "https://plugin/assets/1bd032bb73218a5d141b80cab7111?x-id=PutObject": dial tcp 192.168.0.200:19000: connect: connection refused, icon small en_US failed to remap assets failed to store plugin asset'
+
+    toast.error(longTitle, {
+      description: longDescription,
+    })
+
+    await expect.element(screen.getByText(longTitle)).toBeInTheDocument()
+    await expect.element(screen.getByText(longDescription)).toBeInTheDocument()
+
+    const title = asHTMLElement(screen.getByText(longTitle).element())
+    const description = asHTMLElement(screen.getByText(longDescription).element())
+    expect(title.scrollWidth).toBeLessThanOrEqual(title.clientWidth)
+    expect(description.scrollWidth).toBeLessThanOrEqual(description.clientWidth)
+  })
+
   it('should mark overflow toasts as limited when the stack exceeds the configured limit', async () => {
     const screen = await render(<ToastHost limit={1} />)
 
diff --git a/packages/dify-ui/src/toast/index.tsx b/packages/dify-ui/src/toast/index.tsx
index c97ac3a055..9dd1851818 100644
--- a/packages/dify-ui/src/toast/index.tsx
+++ b/packages/dify-ui/src/toast/index.tsx
@@ -176,15 +176,15 @@ function ToastCard({
             <ToastIcon type={toastType} />
           </div>
           <div className="min-w-0 flex-1 p-1">
-            <div className="flex w-full items-center gap-1">
+            <div className="flex w-full min-w-0 items-center gap-1">
               {toastItem.title != null && (
-                <BaseToast.Title className="system-sm-semibold wrap-break-word text-text-primary">
+                <BaseToast.Title className="min-w-0 flex-1 system-sm-semibold wrap-break-word [overflow-wrap:anywhere] text-text-primary">
                   {toastItem.title}
                 </BaseToast.Title>
               )}
             </div>
             {toastItem.description != null && (
-              <BaseToast.Description className="mt-1 system-xs-regular wrap-break-word text-text-secondary">
+              <BaseToast.Description className="mt-1 min-w-0 system-xs-regular wrap-break-word [overflow-wrap:anywhere] text-text-secondary">
                 {toastItem.description}
               </BaseToast.Description>
             )}