input: Update gap between input and prefix, suffix. (#709)

<img width="813" alt="image"
src="https://github.com/user-attachments/assets/9d99a74a-92b6-44f5-bf33-35ddef6a7ca0"
/>

crates/ui/src/input/input.rs

@@ -224,6 +224,8 @@ pub struct TextInput {
     pub(super) cleanable: bool,
     pub(super) size: Size,
     pub(super) rows: usize,
+    /// For special case, e.g.: NumberInput + - button
+    pub(super) no_gap: bool,
     pub(super) height: Option<gpui::DefiniteLength>,
     pattern: Option<regex::Regex>,
     validate: Option<Box<dyn Fn(&str) -> bool + 'static>>,
@@ -282,6 +284,7 @@ impl TextInput {
             loading: false,
             prefix: None,
             suffix: None,
+            no_gap: false,
             size: Size::Medium,
             height: None,
             pattern: None,
@@ -583,6 +586,14 @@ impl TextInput {
         self
     }
 
+    /// Set true to not use gap between input and prefix, suffix, and clear button.
+    ///
+    /// Default: false
+    pub(super) fn no_gap(mut self) -> Self {
+        self.no_gap = true;
+        self
+    }
+
     /// Set the regular expression pattern of the input field.
     pub fn pattern(mut self, pattern: regex::Regex) -> Self {
         self.pattern = Some(pattern);
@@ -1596,6 +1607,14 @@ impl Render for TextInput {
     fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         const LINE_HEIGHT: Rems = Rems(1.25);
         let focused = self.focus_handle.is_focused(window);
+        let mut gap_x = match self.size {
+            Size::Small => px(4.),
+            Size::Large => px(12.),
+            _ => px(8.),
+        };
+        if self.no_gap {
+            gap_x = px(0.);
+        }
 
         let prefix = self.prefix.as_ref().map(|build| build(window, cx));
         let suffix = self.suffix.as_ref().map(|build| build(window, cx));
@@ -1672,12 +1691,12 @@ impl Render for TextInput {
             .when(prefix.is_none(), |this| this.input_pl(self.size))
             .when(suffix.is_none(), |this| this.input_pr(self.size))
             .children(prefix)
-            .gap_1()
+            .gap(gap_x)
             .items_center()
             .child(
                 div()
                     .id("TextElement")
-                    .w_full()
+                    .flex_1()
                     .when(self.is_multi_line(), |this| this.h_full())
                     .flex_grow()
                     .overflow_x_hidden()

crates/ui/src/input/number_input.rs

@@ -38,6 +38,7 @@ impl NumberInput {
         let input = cx.new(|cx| {
             TextInput::new(window, cx)
                 .pattern(pattern)
+                .no_gap()
                 .appearance(false)
         });