fix(ui): toast overflow

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);