Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the component preview page scroll (#32797)

Browse source 
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
This commit is contained in:
Danilo Leal 2025-06-16 10:18:03 -03:00 • committed by GitHub
parent c72cdfd843
commit d29e94b11c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 38 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

48
crates/zed/src/zed/component_preview.rs
View file

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