Fix bugs (#230)

- Fix color picker hover preview color to shrink_0.
- Fix Divider display.

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(
+            .when(self.description.len() > 0, |this| {
-                div()
+                this.child(
-                    .flex()
+                    div()
-                    .flex_col()
+                        .flex()
-                    .gap_4()
+                        .flex_col()
-                    .p_4()
+                        .gap_4()
-                    .child(Label::new(self.description.clone()).text_size(px(16.0)))
+                        .p_4()
-                    .child(Divider::horizontal().label("This is a divider")),
+                        .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()

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()

crates/ui/src/divider.rs

@@ -1,8 +1,9 @@
-use gpui::{div, prelude::FluentBuilder as _, RenderOnce};
+use gpui::{
-use gpui::{Axis, Div, IntoElement, ParentElement, SharedString, Styled};
+    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::Vertical => this.h_full(),
-                Axis::Horizontal => this.h_flex().w_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::Vertical => this.w(px(1.)).h_full(),
-                        Axis::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
+                        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(