diff options
| -rw-r--r-- | packages/ui/src/components/toast.css | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css index 1459bb189..ed7ba4a20 100644 --- a/packages/ui/src/components/toast.css +++ b/packages/ui/src/components/toast.css @@ -6,7 +6,7 @@ display: flex; flex-direction: column; gap: 8px; - max-width: 400px; + max-width: min(400px, calc(100vw - 64px)); width: 100%; pointer-events: none; @@ -21,6 +21,7 @@ } [data-component="toast"] { + position: relative; display: flex; align-items: flex-start; gap: 20px; @@ -91,10 +92,14 @@ flex-direction: column; gap: 2px; min-width: 0; + overflow: hidden; } [data-slot="toast-title"] { color: var(--text-invert-strong); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; /* text-14-medium */ font-family: var(--font-family-sans); @@ -110,6 +115,8 @@ [data-slot="toast-description"] { color: var(--text-invert-base); text-wrap-style: pretty; + overflow-wrap: anywhere; + word-break: break-word; /* text-14-regular */ font-family: var(--font-family-sans); @@ -124,6 +131,7 @@ [data-slot="toast-actions"] { display: flex; + flex-wrap: wrap; gap: 16px; margin-top: 8px; } @@ -133,6 +141,11 @@ border: none; padding: 0; cursor: pointer; + min-width: 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: var(--text-invert-weak); font-family: var(--font-family-sans); |