Fix the component preview page scroll (#32797)

Danilo Leal created 7 months ago

Plus some other tiny visual adjustments. I've been using the Component
Preview a lot this past week and vertical scroll wasn't working, which
was a big bummer!

Release Notes:

- N/A

Change summary

crates/zed/src/zed/component_preview.rs | 72 ++++++++++++++------------
1 file changed, 38 insertions(+), 34 deletions(-)

Detailed changes

crates/zed/src/zed/component_preview.rs

@@ -776,9 +776,9 @@ impl Render for ComponentPreview {
             .bg(cx.theme().colors().editor_background)
             .child(
                 v_flex()
+                    .h_full()
                     .border_r_1()
                     .border_color(cx.theme().colors().border)
-                    .h_full()
                     .child(
                         gpui::uniform_list(
                             "component-nav",
@@ -800,23 +800,27 @@ impl Render for ComponentPreview {
                             }),
                         )
                         .track_scroll(self.nav_scroll_handle.clone())
-                        .pt_4()
-                        .px_4()
+                        .p_2p5()
                         .w(px(240.))
                         .h_full()
                         .flex_1(),
                     )
                     .child(
-                        div().w_full().pb_4().child(
-                            Button::new("toast-test", "Launch Toast")
-                                .on_click(cx.listener({
-                                    move |this, _, _window, cx| {
-                                        this.test_status_toast(cx);
-                                        cx.notify();
-                                    }
-                                }))
-                                .full_width(),
-                        ),
+                        div()
+                            .w_full()
+                            .p_2p5()
+                            .border_t_1()
+                            .border_color(cx.theme().colors().border)
+                            .child(
+                                Button::new("toast-test", "Launch Toast")
+                                    .full_width()
+                                    .on_click(cx.listener({
+                                        move |this, _, _window, cx| {
+                                            this.test_status_toast(cx);
+                                            cx.notify();
+                                        }
+                                    })),
+                            ),
                     ),
             )
             .child(
@@ -824,7 +828,7 @@ impl Render for ComponentPreview {
                     .id("content-area")
                     .flex_1()
                     .size_full()
-                    .overflow_hidden()
+                    .overflow_y_scroll()
                     .child(
                         div()
                             .p_2()
@@ -1104,9 +1108,8 @@ impl ComponentPreviewPage {
 
     fn render_header(&self, _: &Window, cx: &App) -> impl IntoElement {
         v_flex()
-            .px_12()
-            .pt_16()
-            .pb_12()
+            .py_12()
+            .px_16()
             .gap_6()
             .bg(cx.theme().colors().surface_background)
             .border_b_1()
@@ -1121,7 +1124,6 @@ impl ComponentPreviewPage {
                     )
                     .child(
                         h_flex()
-                            .items_center()
                             .gap_2()
                             .child(
                                 Headline::new(self.component.scopeless_name())
@@ -1149,34 +1151,36 @@ impl ComponentPreviewPage {
             None
         };
 
+        let content = if let Some(ag_preview) = maybe_agent_preview {
+            // Use agent preview if available
+            ag_preview
+        } else if let Some(preview) = self.component.preview() {
+            // Fall back to component preview
+            preview(window, cx).unwrap_or_else(|| {
+                div()
+                    .child("Failed to load preview. This path should be unreachable")
+                    .into_any_element()
+            })
+        } else {
+            div().child("No preview available").into_any_element()
+        };
+
         v_flex()
+            .size_full()
             .flex_1()
             .px_12()
             .py_6()
             .bg(cx.theme().colors().editor_background)
-            .child(if let Some(element) = maybe_agent_preview {
-                // Use agent preview if available
-                element
-            } else if let Some(preview) = self.component.preview() {
-                // Fall back to component preview
-                preview(window, cx).unwrap_or_else(|| {
-                    div()
-                        .child("Failed to load preview. This path should be unreachable")
-                        .into_any_element()
-                })
-            } else {
-                div().child("No preview available").into_any_element()
-            })
+            .child(content)
     }
 }
 
 impl RenderOnce for ComponentPreviewPage {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         v_flex()
-            .id("component-preview-page")
-            .overflow_y_scroll()
+            .size_full()
+            .flex_1()
             .overflow_x_hidden()
-            .w_full()
             .child(self.render_header(window, cx))
             .child(self.render_preview(window, cx))
     }