alert: Add support for text wrapping (#899)

<img width="935" alt="image"
src="https://github.com/user-attachments/assets/6eb10c67-5301-4414-af7f-9b4444b77fb6"
/>

crates/story/src/alert_story.rs

@@ -114,7 +114,7 @@ impl Render for AlertStory {
                     })),
             )
             .child(
-                section("Info").max_w_md().child(
+                section("Info").w_2_3().child(
                     Alert::info("info1", "This is an info alert.")
                         .with_size(self.size)
                         .title("Info message")
@@ -124,7 +124,7 @@ impl Render for AlertStory {
                 ),
             )
             .child(
-                section("Success with Title").max_w_md().child(
+                section("Success with Title").w_2_3().child(
                     Alert::success(
                         "success-1",
                         "You have successfully submitted your form.\n\
@@ -135,7 +135,7 @@ impl Render for AlertStory {
                 ),
             )
             .child(
-                section("Warning").max_w_md().child(
+                section("Warning").w_2_3().child(
                     Alert::warning(
                         "warning-1",
                         "This is a warning alert with icon and title.\n\
@@ -145,7 +145,7 @@ impl Render for AlertStory {
                 ),
             )
             .child(
-                section("Error").max_w_md().child(
+                section("Error").w_2_3().child(
                     Alert::error(
                         "error-1",
                         "There was an error submitting your form.\n\
@@ -156,8 +156,11 @@ impl Render for AlertStory {
                 ),
             )
             .child(
-                section("Custom Icon").max_w_md().child(
+                section("Custom Icon").w_2_3().child(
-                    Alert::info("other-1", "Custom icon with info alert.")
+                    Alert::info(
+                        "other-1",
+                        "Custom icon with info alert with long long long long long long long long long long long long long long long long long long long long messageeeeeeeee.",
+                    )
                     .title("Custom Icon")
                     .with_size(self.size)
                     .icon(IconName::Bell),

crates/ui/src/alert.rs

@@ -55,7 +55,7 @@ impl Alert {
     /// Create a new alert with the given message.
     fn new(id: impl Into<ElementId>, message: impl Into<Text>) -> Self {
         Self {
-            base: div().id(id),
+            base: h_flex().id(id),
             variant: AlertVariant::default(),
             icon: None,
             title: None,
@@ -181,33 +181,30 @@ impl RenderOnce for Alert {
         let color = self.variant.color(cx);
 
         self.base
-            .flex_1()
-            .when(self.banner, |this| this.w_full())
-            .child(
-                h_flex()
             .w_full()
-                    .items_center()
+            .bg(color.opacity(0.06))
+            .text_color(self.variant.fg(cx))
+            .px(padding_x)
+            .py(padding_y)
+            .gap(gap)
+            .justify_between()
+            .line_height(relative(line_height))
+            .map(|this| match self.size {
+                Size::Large => this.text_base(),
+                _ => this.text_sm(),
+            })
             .when(!self.banner, |this| {
                 this.rounded(radius)
                     .border_1()
                     .border_color(color)
                     .items_start()
             })
-                    .bg(color.opacity(0.06))
-                    .text_color(self.variant.fg(cx))
-                    .px(padding_x)
-                    .py(padding_y)
-                    .gap(gap)
-                    .overflow_hidden()
-                    .justify_between()
-                    .map(|this| match self.size {
-                        Size::Large => this.text_base(),
-                        _ => this.text_sm(),
-                    })
-                    .line_height(relative(line_height))
             .child(
-                        h_flex()
+                div()
+                    .flex()
+                    .flex_1()
                     .items_start()
+                    .overflow_hidden()
                     .gap(gap)
                     .child(
                         div().mt(icon_mt).child(
@@ -219,6 +216,7 @@ impl RenderOnce for Alert {
                     )
                     .child(
                         div()
+                            .flex_1()
                             .overflow_hidden()
                             .when(!self.banner, |this| {
                                 this.when_some(self.title, |this, title| {
@@ -232,7 +230,7 @@ impl RenderOnce for Alert {
                                     )
                                 })
                             })
-                                    .child(div().overflow_hidden().child(self.message)),
+                            .child(self.message),
                     ),
             )
             .when_some(self.on_close, |this, on_close| {
@@ -253,8 +251,7 @@ impl RenderOnce for Alert {
                                 .flex_shrink_0(),
                         ),
                 )
-                    }),
+            })
-            )
             .into_any_element()
     }
 }