ui: Fix custom size preview example of vector component (#43633)

Floyd Wang and Danilo Leal created 1 week ago

In the vector component custom size preview example, the image will
overflow the content box.

| Before | After |
| - | - |
| <img width="1235" height="1042" alt="Before"
src="https://github.com/user-attachments/assets/1c4ff772-2578-41b2-94e8-9e2d625484f8"
/> | <img width="1234" height="1044" alt="After"
src="https://github.com/user-attachments/assets/19d6ab1a-d169-417e-b550-1e422358288e"
/> |

Release Notes:

- N/A

---------

Co-authored-by: Danilo Leal <[e-mail]>

Change summary

crates/ui/src/components/image.rs | 33 ++++++++++++++++++---------------
1 file changed, 18 insertions(+), 15 deletions(-)

Detailed changes

crates/ui/src/components/image.rs

@@ -115,6 +115,8 @@ impl Component for Vector {
     }
 
     fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
+        let size = rems_from_px(60.);
+
         Some(
             v_flex()
                 .gap_6()
@@ -124,11 +126,18 @@ impl Component for Vector {
                         vec![
                             single_example(
                                 "Default",
-                                Vector::square(VectorName::ZedLogo, rems(8.)).into_any_element(),
+                                Vector::square(VectorName::ZedLogo, size).into_any_element(),
                             ),
                             single_example(
                                 "Custom Size",
-                                Vector::new(VectorName::ZedLogo, rems(12.), rems(6.))
+                                h_flex()
+                                    .h(rems_from_px(120.))
+                                    .justify_center()
+                                    .child(Vector::new(
+                                        VectorName::ZedLogo,
+                                        rems_from_px(120.),
+                                        rems_from_px(200.),
+                                    ))
                                     .into_any_element(),
                             ),
                         ],
@@ -138,13 +147,13 @@ impl Component for Vector {
                         vec![
                             single_example(
                                 "Accent Color",
-                                Vector::square(VectorName::ZedLogo, rems(8.))
+                                Vector::square(VectorName::ZedLogo, size)
                                     .color(Color::Accent)
                                     .into_any_element(),
                             ),
                             single_example(
                                 "Error Color",
-                                Vector::square(VectorName::ZedLogo, rems(8.))
+                                Vector::square(VectorName::ZedLogo, size)
                                     .color(Color::Error)
                                     .into_any_element(),
                             ),
@@ -152,17 +161,11 @@ impl Component for Vector {
                     ),
                     example_group_with_title(
                         "Different Vectors",
-                        vec![
-                            single_example(
-                                "Zed Logo",
-                                Vector::square(VectorName::ZedLogo, rems(8.)).into_any_element(),
-                            ),
-                            single_example(
-                                "Zed X Copilot",
-                                Vector::square(VectorName::ZedXCopilot, rems(8.))
-                                    .into_any_element(),
-                            ),
-                        ],
+                        vec![single_example(
+                            "Zed X Copilot",
+                            Vector::square(VectorName::ZedXCopilot, rems_from_px(100.))
+                                .into_any_element(),
+                        )],
                     ),
                 ])
                 .into_any_element(),