diff --git a/crates/zed/src/zed/component_preview.rs b/crates/zed/src/zed/component_preview.rs index d77076aff8..1d9cd26854 100644 --- a/crates/zed/src/zed/component_preview.rs +++ b/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)) }