From b4449f10cf3bd4d65d173ab17f968499003c2698 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Tue, 22 Apr 2025 21:19:20 +0800
Subject: [PATCH] dropdown: Avoid selected value text wrap. (#808)

---
 crates/story/src/dropdown_story.rs | 45 ++++++++++++++++--------------
 crates/story/src/lib.rs            | 14 ++++++----
 crates/ui/src/dropdown.rs          | 14 ++++++----
 3 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/crates/story/src/dropdown_story.rs b/crates/story/src/dropdown_story.rs
index 5eefe819..838f0516 100644
--- a/crates/story/src/dropdown_story.rs
+++ b/crates/story/src/dropdown_story.rs
@@ -103,13 +103,14 @@ impl DropdownStory {
             "Banana".into(),
             "Grape".into(),
             "Pineapple".into(),
-            "Watermelon & This is a longlonglonglonglonglonglonglonglong title".into(),
+            "Watermelon & This is a long long long long long long long long long title".into(),
             "Avocado".into(),
         ]);
         let fruit_dropdown = cx.new(|cx| {
             Dropdown::new("dropdown-fruits", fruits, None, window, cx)
                 .icon(IconName::Search)
-                .menu_width(px(320.))
+                .width(px(320.))
+                .menu_width(px(400.))
         });
 
         cx.new(|cx| {
@@ -278,25 +279,27 @@ impl Render for DropdownStory {
                     .child(self.simple_dropdown3.clone()),
             )
             .child(
-                section("Values")
-                    .max_w_md()
-                    .child(format!(
-                        "Country: {:?}",
-                        self.country_dropdown.read(cx).selected_value()
-                    ))
-                    .child(format!(
-                        "fruit: {:?}",
-                        self.fruit_dropdown.read(cx).selected_value()
-                    ))
-                    .child(format!(
-                        "UI: {:?}",
-                        self.simple_dropdown1.read(cx).selected_value()
-                    ))
-                    .child(format!(
-                        "Language: {:?}",
-                        self.simple_dropdown2.read(cx).selected_value()
-                    ))
-                    .child("This is other text."),
+                section("Selected Values").max_w_lg().child(
+                    v_flex()
+                        .gap_3()
+                        .child(format!(
+                            "Country: {:?}",
+                            self.country_dropdown.read(cx).selected_value()
+                        ))
+                        .child(format!(
+                            "fruit: {:?}",
+                            self.fruit_dropdown.read(cx).selected_value()
+                        ))
+                        .child(format!(
+                            "UI: {:?}",
+                            self.simple_dropdown1.read(cx).selected_value()
+                        ))
+                        .child(format!(
+                            "Language: {:?}",
+                            self.simple_dropdown2.read(cx).selected_value()
+                        ))
+                        .child("This is other text."),
+                ),
             )
     }
 }
diff --git a/crates/story/src/lib.rs b/crates/story/src/lib.rs
index 57ce1379..09856966 100644
--- a/crates/story/src/lib.rs
+++ b/crates/story/src/lib.rs
@@ -95,7 +95,7 @@ use gpui_component::{
     notification::Notification,
     popup_menu::PopupMenu,
     scroll::ScrollbarShow,
-    v_flex, ActiveTheme, ContextModal, IconName, Root, StyledExt, TitleBar,
+    v_flex, ActiveTheme, ContextModal, IconName, Root, TitleBar,
 };
 
 #[derive(Clone, PartialEq, Eq, Deserialize)]
@@ -378,15 +378,14 @@ impl RenderOnce for StorySection {
                     .child(self.title),
             )
             .child(
-                div()
+                v_flex()
                     .p_4()
                     .border_1()
                     .border_color(cx.theme().border)
                     .rounded_lg()
-                    .v_flex()
                     .items_center()
                     .justify_center()
-                    .child(self.base.gap_4().w_full().children(self.children)),
+                    .child(self.base.children(self.children)),
             )
     }
 }
@@ -396,7 +395,12 @@ impl ContextMenuExt for StorySection {}
 pub(crate) fn section(title: impl IntoElement) -> StorySection {
     StorySection {
         title: title.into_any_element(),
-        base: h_flex().flex_wrap().justify_center().items_center(),
+        base: h_flex()
+            .flex_wrap()
+            .justify_center()
+            .items_center()
+            .w_full()
+            .gap_4(),
         children: vec![],
     }
 }
diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs
index e925fee8..17ad57be 100644
--- a/crates/ui/src/dropdown.rs
+++ b/crates/ui/src/dropdown.rs
@@ -552,7 +552,7 @@ where
 
     fn display_title(&self, _: &Window, cx: &App) -> impl IntoElement {
         let title = if let Some(selected_index) = &self.selected_index(cx) {
-            let title = self
+            let mut title = self
                 .list
                 .read(cx)
                 .delegate()
@@ -561,9 +561,11 @@ where
                 .map(|item| item.title().to_string())
                 .unwrap_or_default();
 
-            h_flex()
-                .when_some(self.title_prefix.clone(), |this, prefix| this.child(prefix))
-                .child(title.clone())
+            if let Some(prefix) = self.title_prefix.as_ref() {
+                title = format!("{}{}", prefix, title);
+            }
+
+            div().child(title.clone())
         } else {
             div().text_color(cx.theme().accent_foreground).child(
                 self.placeholder
@@ -636,7 +638,7 @@ where
             .input_text_size(self.size)
             .child(
                 div()
-                    .id("dropdown-input")
+                    .id(ElementId::Name(format!("{}-input", self.id).into()))
                     .relative()
                     .flex()
                     .items_center()
@@ -674,6 +676,8 @@ where
                                 div()
                                     .w_full()
                                     .overflow_hidden()
+                                    .whitespace_nowrap()
+                                    .truncate()
                                     .child(self.display_title(window, cx)),
                             )
                             .when(show_clean, |this| {