From 28dde14a33ee7b2a9858dfbb41b350e90118e4f3 Mon Sep 17 00:00:00 2001
From: Floyd Wang <gassnake999@gmail.com>
Date: Fri, 28 Nov 2025 04:09:19 +0800
Subject: [PATCH] ui: Fix custom size preview example of vector component
 (#43633)

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 <daniloleal09@gmail.com>
---
 crates/ui/src/components/image.rs | 33 +++++++++++++++++--------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/crates/ui/src/components/image.rs b/crates/ui/src/components/image.rs
index 8a14cffd3b2de2e184fd87a9212775c470e3118d..3e8cbd8fff7ba484b1b1eb9fd50da55998d7eae9 100644
--- a/crates/ui/src/components/image.rs
+++ b/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(),