From e489e2e583a8b2dd74e6109fd9cbd29bc8172ec6 Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Tue, 12 Dec 2023 16:38:25 -0500
Subject: [PATCH] Enable scrolling in tab bar (#3614)

This PR enables scrolling horizontally in the tab bar.

Currently this requires holding down <kbd>Shift</kbd> for the scroll to
activate. We'll need to look into this.

Scrolling also currently works when there is a split in the editor, as
the non-split view goes down a different rendering path that does not
constrain the pane width, which breaks a number of things.

Release Notes:

- N/A
---
 crates/storybook2/src/stories.rs              |  2 +
 .../storybook2/src/stories/overflow_scroll.rs | 41 +++++++++++++++++++
 crates/storybook2/src/story_selector.rs       |  4 ++
 crates/ui2/src/components/tab_bar.rs          | 13 ++++--
 4 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 crates/storybook2/src/stories/overflow_scroll.rs

diff --git a/crates/storybook2/src/stories.rs b/crates/storybook2/src/stories.rs
index d0c363b4b4c58185793ca208343e2b594b38d200..8a49c4372ac5ec96be37fe9040a1f45acae906b4 100644
--- a/crates/storybook2/src/stories.rs
+++ b/crates/storybook2/src/stories.rs
@@ -2,6 +2,7 @@ mod auto_height_editor;
 mod cursor;
 mod focus;
 mod kitchen_sink;
+mod overflow_scroll;
 mod picker;
 mod scroll;
 mod text;
@@ -12,6 +13,7 @@ pub use auto_height_editor::*;
 pub use cursor::*;
 pub use focus::*;
 pub use kitchen_sink::*;
+pub use overflow_scroll::*;
 pub use picker::*;
 pub use scroll::*;
 pub use text::*;
diff --git a/crates/storybook2/src/stories/overflow_scroll.rs b/crates/storybook2/src/stories/overflow_scroll.rs
new file mode 100644
index 0000000000000000000000000000000000000000..631b851304c3f0a23fd0333dec720306a270d903
--- /dev/null
+++ b/crates/storybook2/src/stories/overflow_scroll.rs
@@ -0,0 +1,41 @@
+use gpui::{Div, Render};
+use story::Story;
+
+use ui::prelude::*;
+
+pub struct OverflowScrollStory;
+
+impl Render for OverflowScrollStory {
+    type Element = Div;
+
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+        Story::container()
+            .child(Story::title("Overflow Scroll"))
+            .child(Story::label("`overflow_x_scroll`"))
+            .child(
+                h_stack()
+                    .id("overflow_x_scroll")
+                    .gap_2()
+                    .overflow_x_scroll()
+                    .children((0..100).map(|i| {
+                        div()
+                            .p_4()
+                            .debug_bg_cyan()
+                            .child(SharedString::from(format!("Child {}", i + 1)))
+                    })),
+            )
+            .child(Story::label("`overflow_y_scroll`"))
+            .child(
+                v_stack()
+                    .id("overflow_y_scroll")
+                    .gap_2()
+                    .overflow_y_scroll()
+                    .children((0..100).map(|i| {
+                        div()
+                            .p_4()
+                            .debug_bg_green()
+                            .child(SharedString::from(format!("Child {}", i + 1)))
+                    })),
+            )
+    }
+}
diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs
index c38a5b6a0cebd9a670d94c358bcd0998a729cc8e..039cd46ee8a0703fa5889c5a8712f7012dd303d3 100644
--- a/crates/storybook2/src/story_selector.rs
+++ b/crates/storybook2/src/story_selector.rs
@@ -27,6 +27,7 @@ pub enum ComponentStory {
     List,
     ListHeader,
     ListItem,
+    OverflowScroll,
     Scroll,
     Tab,
     TabBar,
@@ -54,6 +55,9 @@ impl ComponentStory {
             Self::List => cx.build_view(|_| ui::ListStory).into(),
             Self::ListHeader => cx.build_view(|_| ui::ListHeaderStory).into(),
             Self::ListItem => cx.build_view(|_| ui::ListItemStory).into(),
+            Self::OverflowScroll => cx
+                .build_view(|_| crate::stories::OverflowScrollStory)
+                .into(),
             Self::Scroll => ScrollStory::view(cx).into(),
             Self::Text => TextStory::view(cx).into(),
             Self::Tab => cx.build_view(|_| ui::TabStory).into(),
diff --git a/crates/ui2/src/components/tab_bar.rs b/crates/ui2/src/components/tab_bar.rs
index c01586c4eecb5b633f8f2f54ab3968a7b8274b37..dc31eefd0a69b4aeb6b006831281f5af5742cec7 100644
--- a/crates/ui2/src/components/tab_bar.rs
+++ b/crates/ui2/src/components/tab_bar.rs
@@ -93,11 +93,10 @@ impl RenderOnce for TabBar {
             .id(self.id)
             .group("tab_bar")
             .track_focus(&self.focus_handle)
-            .w_full()
-            .h(rems(HEIGHT_IN_REMS))
-            .overflow_hidden()
             .flex()
             .flex_none()
+            .w_full()
+            .h(rems(HEIGHT_IN_REMS))
             .bg(cx.theme().colors().tab_bar_background)
             .child(
                 h_stack()
@@ -125,7 +124,13 @@ impl RenderOnce for TabBar {
                             .border_b()
                             .border_color(cx.theme().colors().border),
                     )
-                    .child(h_stack().id("tabs").z_index(2).children(self.children)),
+                    .child(
+                        h_stack()
+                            .id("tabs")
+                            .z_index(2)
+                            .overflow_x_scroll()
+                            .children(self.children),
+                    ),
             )
             .child(
                 h_stack()