From 481dd1a88adf1f3893b23d6a96f4fcd17e842a10 Mon Sep 17 00:00:00 2001
From: Shantur <shantur@Mac.home>
Date: Tue, 31 Mar 2026 18:41:32 +0100
Subject: [PATCH] fix(ui): wrap long toast messages

Constrain toast titles and bodies so long retry and error messages wrap inside the notification card instead of overflowing past the container.
---
 packages/ui/src/lib/notifications.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/lib/notifications.tsx b/packages/ui/src/lib/notifications.tsx
index 4222c69a..71585f91 100644
--- a/packages/ui/src/lib/notifications.tsx
+++ b/packages/ui/src/lib/notifications.tsx
@@ -102,9 +102,11 @@ export function showToastNotification(payload: ToastPayload): ToastHandle {
         </button>
         <div class="flex items-start gap-3 pr-6">
           <span class={`mt-1 inline-block h-2.5 w-2.5 rounded-full ${accent.badge}`} />
-          <div class="flex-1 text-sm leading-snug">
-            {payload.title && <p class={`font-semibold ${accent.headline}`}>{payload.title}</p>}
-            <p class={`${accent.body} ${payload.title ? "mt-1" : ""}`}>{payload.message}</p>
+          <div class="min-w-0 flex-1 text-sm leading-snug">
+            {payload.title && <p class={`break-words ${accent.headline} font-semibold`}>{payload.title}</p>}
+            <p class={`${accent.body} ${payload.title ? "mt-1" : ""} whitespace-pre-wrap break-words [overflow-wrap:anywhere]`}>
+              {payload.message}
+            </p>
             {payload.action && (
               <button
                 type="button"