diff --git a/crates/story/src/lib.rs b/crates/story/src/lib.rs index c5eab444..bb15dec0 100644 --- a/crates/story/src/lib.rs +++ b/crates/story/src/lib.rs @@ -297,15 +297,17 @@ impl Render for StoryContainer { .overflow_scroll() .track_focus(&self.focus_handle) .on_action(cx.listener(Self::on_action_panel_info)) - .child( - div() - .flex() - .flex_col() - .gap_4() - .p_4() - .child(Label::new(self.description.clone()).text_size(px(16.0))) - .child(Divider::horizontal().label("This is a divider")), - ) + .when(self.description.len() > 0, |this| { + this.child( + div() + .flex() + .flex_col() + .gap_4() + .p_4() + .child(Label::new(self.description.clone()).text_size(px(16.0))) + .child(Divider::horizontal().label("This is a divider")), + ) + }) .when_some(self.story.clone(), |this, story| { this.child( v_flex() diff --git a/crates/ui/src/color_picker.rs b/crates/ui/src/color_picker.rs index 55511813..c6830957 100644 --- a/crates/ui/src/color_picker.rs +++ b/crates/ui/src/color_picker.rs @@ -248,6 +248,7 @@ impl ColorPicker { .child( div() .bg(hovered_color) + .flex_shrink_0() .border_1() .border_color(hovered_color.darken(0.2)) .size_5() diff --git a/crates/ui/src/divider.rs b/crates/ui/src/divider.rs index abd1dc7f..4b03024e 100644 --- a/crates/ui/src/divider.rs +++ b/crates/ui/src/divider.rs @@ -1,8 +1,9 @@ -use gpui::{div, prelude::FluentBuilder as _, RenderOnce}; -use gpui::{Axis, Div, IntoElement, ParentElement, SharedString, Styled}; +use gpui::{ + div, prelude::FluentBuilder as _, px, Axis, Div, IntoElement, ParentElement, RenderOnce, + SharedString, Styled, +}; use crate::theme::ActiveTheme; -use crate::StyledExt as _; #[derive(IntoElement)] pub struct Divider { @@ -45,18 +46,22 @@ impl RenderOnce for Divider { let theme = cx.theme(); self.base + .flex() + .flex_shrink_0() + .items_center() + .justify_center() .map(|this| match self.axis { - Axis::Vertical => this.flex().flex_row().items_center().h_full(), - Axis::Horizontal => this.h_flex().w_full(), + Axis::Vertical => this.h_full(), + Axis::Horizontal => this.w_full(), }) .child( div() .absolute() .map(|this| match self.axis { - Axis::Vertical => this.v_flex().w_0().h_full().border_l_1(), - Axis::Horizontal => this.h_flex().h_0().w_full().border_b_1(), + Axis::Vertical => this.w(px(1.)).h_full(), + Axis::Horizontal => this.h(px(1.)).w_full(), }) - .border_color(cx.theme().border), + .bg(cx.theme().border), ) .when_some(self.label, |this, label| { this.child(