outline panel: Improve the search query header design (#25283)

Danilo Leal created 10 months ago

Fine-tuning alignment and spacing.

| Before | After |
|--------|--------|
| ![CleanShot 2025-02-20 at 5  45
09@2x](https://github.com/user-attachments/assets/0db377b2-e030-4a88-8465-fb8c3a535ad3)
| ![CleanShot 2025-02-20 at 5  44
33@2x](https://github.com/user-attachments/assets/ccabef92-3e2b-47b8-a766-2f707d9d9e8f)
|

Release Notes:

- N/A

Change summary

crates/outline_panel/src/outline_panel.rs | 17 ++++++++++-------
1 file changed, 10 insertions(+), 7 deletions(-)

Detailed changes

crates/outline_panel/src/outline_panel.rs

@@ -4950,13 +4950,16 @@ impl Render for OutlinePanel {
             .track_focus(&self.focus_handle)
             .when_some(search_query, |outline_panel, search_state| {
                 outline_panel.child(
-                    v_flex()
-                        .child(
-                            Label::new(format!("Searching: '{}'", search_state.query))
-                                .color(Color::Muted)
-                                .mx_2(),
-                        )
-                        .child(horizontal_separator(cx)),
+                    h_flex()
+                        .py_1p5()
+                        .px_2()
+                        .h(DynamicSpacing::Base32.px(cx))
+                        .flex_shrink_0()
+                        .border_b_1()
+                        .border_color(cx.theme().colors().border)
+                        .gap_0p5()
+                        .child(Label::new("Searching:").color(Color::Muted))
+                        .child(Label::new(format!("'{}'", search_state.query))),
                 )
             })
             .child(self.render_main_contents(query, show_indent_guides, indent_size, window, cx))