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.
This commit is contained in:
Shantur
2026-03-31 18:41:32 +01:00
parent 3f6cdd36f3
commit 481dd1a88a

View File

@@ -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"