component_preview: Pin the filter input at the top (#43636)

Floyd Wang created 1 week ago

When I scroll the page after selecting a component, the filter input
disappears. It would be more helpful if it stayed fixed at the top.

## Before


https://github.com/user-attachments/assets/e26031f1-d6e7-4ae2-a148-88f4c548a5cf

## After


https://github.com/user-attachments/assets/f120355c-74d3-4724-9ffc-71fb7e3a4586

Release Notes:

- N/A

Change summary

crates/zed/src/zed/component_preview.rs | 22 ++++++++++++----------
1 file changed, 12 insertions(+), 10 deletions(-)

Detailed changes

crates/zed/src/zed/component_preview.rs

@@ -653,10 +653,8 @@ impl Render for ComponentPreview {
             )
             .child(
                 v_flex()
-                    .id("content-area")
                     .flex_1()
                     .size_full()
-                    .overflow_y_scroll()
                     .child(
                         div()
                             .p_2()
@@ -665,14 +663,18 @@ impl Render for ComponentPreview {
                             .border_color(cx.theme().colors().border)
                             .child(self.filter_editor.clone()),
                     )
-                    .child(match active_page {
-                        PreviewPage::AllComponents => {
-                            self.render_all_components(cx).into_any_element()
-                        }
-                        PreviewPage::Component(id) => self
-                            .render_component_page(&id, window, cx)
-                            .into_any_element(),
-                    }),
+                    .child(
+                        div().id("content-area").flex_1().overflow_y_scroll().child(
+                            match active_page {
+                                PreviewPage::AllComponents => {
+                                    self.render_all_components(cx).into_any_element()
+                                }
+                                PreviewPage::Component(id) => self
+                                    .render_component_page(&id, window, cx)
+                                    .into_any_element(),
+                            },
+                        ),
+                    ),
             )
     }
 }