monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(ui): toast overflow

Browse Source
This commit is contained in:
Adam
2026-02-05 07:26:21 -06:00
parent afce869d3b
commit 26b786dd3f
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/ui/src/components/toast.css
View File

@@ -6,7 +6,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
max-width: 400px; max-width: min(400px, calc(100vw - 64px));
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
@@ -21,6 +21,7 @@
} }
[data-component="toast"] { [data-component="toast"] {
position: relative;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 20px; gap: 20px;
@@ -91,10 +92,14 @@
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
min-width: 0; min-width: 0;
overflow: hidden;
} }
[data-slot="toast-title"] { [data-slot="toast-title"] {
color: var(--text-invert-strong); color: var(--text-invert-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
@@ -110,6 +115,8 @@
[data-slot="toast-description"] { [data-slot="toast-description"] {
color: var(--text-invert-base); color: var(--text-invert-base);
text-wrap-style: pretty; text-wrap-style: pretty;
overflow-wrap: anywhere;
word-break: break-word;
/* text-14-regular */ /* text-14-regular */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
@@ -124,6 +131,7 @@
[data-slot="toast-actions"] { [data-slot="toast-actions"] {
display: flex; display: flex;
flex-wrap: wrap;
gap: 16px; gap: 16px;
margin-top: 8px; margin-top: 8px;
} }
@@ -133,6 +141,11 @@
border: none; border: none;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-invert-weak); color: var(--text-invert-weak);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);