Fix toast contents not filling container

Nate Butler created 2 years ago

Change summary

crates/ui2/src/components/notification.rs | 14 ++++++++++----
crates/ui2/src/components/toast.rs        | 17 +++++++++++------
2 files changed, 21 insertions(+), 10 deletions(-)

Detailed changes

crates/ui2/src/components/notification.rs

@@ -11,7 +11,7 @@ use crate::{
 ///
 /// You must provide a primary action for the user to take.
 ///
-/// To simply convey information, use a Status.
+/// To simply convey information, use a `StatusToast`.
 #[derive(Element)]
 pub struct NotificationToast<S: 'static + Send + Sync + Clone> {
     state_type: PhantomData<S>,
@@ -52,21 +52,27 @@ impl<S: 'static + Send + Sync + Clone> NotificationToast<S> {
         let color = ThemeColor::new(cx);
 
         let notification = h_stack()
+            .min_w_64()
+            .max_w_96()
             .gap_1()
             .items_start()
+            .p_1()
             .children(self.left_icon.map(|i| IconElement::new(i)))
             .child(
                 v_stack()
+                    .flex_1()
+                    .w_full()
+                    .gap_1()
                     .child(
                         h_stack()
                             .justify_between()
-                            .p_1()
                             .child(Label::new(self.title.clone()))
-                            .child(IconButton::new(Icon::Close)),
+                            .child(IconButton::new(Icon::Close).color(crate::IconColor::Muted)),
                     )
                     .child(
                         v_stack()
-                            .p_1()
+                            .overflow_hidden_x()
+                            .gap_1()
                             .child(Label::new(self.message.clone()))
                             .child(
                                 h_stack()

crates/ui2/src/components/toast.rs

@@ -10,6 +10,11 @@ pub enum ToastOrigin {
     BottomRight,
 }
 
+/// Don't use toast directly:
+///
+/// - For messages with a required action, use a `NotificationToast`.
+/// - For messages that convey information, use a `StatusToast`.
+///
 /// A toast is a small, temporary window that appears to show a message to the user
 /// or indicate a required action.
 ///
@@ -39,19 +44,19 @@ impl<S: 'static + Send + Sync> Toast<S> {
         if self.origin == ToastOrigin::Bottom {
             div = div.right_1_2();
         } else {
-            div = div.right_4();
+            div = div.right_2();
         }
 
         div.z_index(5)
             .absolute()
-            .bottom_4()
+            .bottom_9()
             .flex()
-            .py_2()
+            .py_1()
             .px_1p5()
-            .min_w_64()
-            .rounded_md()
+            .rounded_lg()
+            .shadow_md()
+            .overflow_hidden()
             .fill(color.elevated_surface)
-            .max_w_96()
             .children(self.children.drain(..))
     }
 }