From ac3d6760ed0de71ca4d977c35d3efd98a4b13186 Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 17 Jul 2024 13:59:20 +0800
Subject: [PATCH] Fix vertical Divider

---
 crates/story/src/scrollable_story.rs |  6 +++---
 crates/ui/src/divider.rs             | 29 +++++++++++++++++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/crates/story/src/scrollable_story.rs b/crates/story/src/scrollable_story.rs
index d486229f..f17104ae 100644
--- a/crates/story/src/scrollable_story.rs
+++ b/crates/story/src/scrollable_story.rs
@@ -65,7 +65,7 @@ impl Render for ScrollableStory {
             .gap_4()
             .child(
                 h_flex()
-                    .gap_1()
+                    .gap_2()
                     .child(
                         Button::new("test-0", cx)
                             .label("Size 0")
@@ -87,7 +87,7 @@ impl Render for ScrollableStory {
                                 view.change_test_cases(2, cx);
                             })),
                     )
-                    .child(Divider::vertical())
+                    .child(Divider::vertical().px_2())
                     .child(
                         Button::new("test-axis-both", cx)
                             .label("Both Scrollbar")
@@ -105,7 +105,7 @@ impl Render for ScrollableStory {
                             })),
                     )
                     .child(
-                        Button::new("test-axis-both", cx)
+                        Button::new("test-axis-horizontal", cx)
                             .label("Horizontal")
                             .on_click(cx.listener(|view, _, cx| {
                                 view.change_axis(ScrollbarAxis::Horizontal, cx)
diff --git a/crates/ui/src/divider.rs b/crates/ui/src/divider.rs
index 2d457f2c..4260860d 100644
--- a/crates/ui/src/divider.rs
+++ b/crates/ui/src/divider.rs
@@ -1,5 +1,5 @@
-use gpui::IntoElement;
-use gpui::{div, prelude::FluentBuilder as _, RenderOnce, Styled as _};
+use gpui::{div, prelude::FluentBuilder as _, RenderOnce};
+use gpui::{Div, IntoElement, ParentElement, Styled};
 
 use crate::theme::ActiveTheme;
 use crate::StyledExt as _;
@@ -11,33 +11,48 @@ enum Orientation {
 
 #[derive(IntoElement)]
 pub struct Divider {
+    base: Div,
     orientation: Orientation,
 }
 
 impl Divider {
     pub fn vertical() -> Self {
         Self {
+            base: div(),
             orientation: Orientation::Vertical,
         }
     }
 
     pub fn horizontal() -> Self {
         Self {
+            base: div(),
             orientation: Orientation::Horizontal,
         }
     }
 }
 
+impl Styled for Divider {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
 impl RenderOnce for Divider {
     fn render(self, cx: &mut gpui::WindowContext) -> impl gpui::IntoElement {
         let theme = cx.theme();
 
-        div()
+        self.base
             .map(|this| match self.orientation {
-                Orientation::Vertical => this.v_flex().w_0().h_full(),
-                Orientation::Horizontal => this.h_flex().h_0().w_full(),
+                Orientation::Vertical => this.v_flex().h_full(),
+                Orientation::Horizontal => this.h_flex().w_full(),
             })
-            .border_b_1()
-            .border_color(theme.border)
+            .child(
+                div()
+                    .map(|this| match self.orientation {
+                        Orientation::Vertical => this.v_flex().w_0().h_full().border_l_1(),
+                        Orientation::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
+                    })
+                    .border_color(theme.border),
+            )
     }
 }