Add scrollbars to markdown preview and syntax tree view (#38183)

Finn Evers created 1 month ago

Closes https://github.com/zed-industries/zed/issues/38141

This PR adds default scrollbars to the markdown preview and syntax tree
view.

Release Notes:

- Added scrollbars to the markdown preview and syntax tree view.

Change summary

crates/language_tools/src/syntax_tree_view.rs        | 8 ++++++--
crates/markdown_preview/src/markdown_preview_view.rs | 5 +++--
2 files changed, 9 insertions(+), 4 deletions(-)

Detailed changes

crates/language_tools/src/syntax_tree_view.rs

@@ -12,7 +12,8 @@ use theme::ActiveTheme;
 use tree_sitter::{Node, TreeCursor};
 use ui::{
     ButtonCommon, ButtonLike, Clickable, Color, ContextMenu, FluentBuilder as _, IconButton,
-    IconName, Label, LabelCommon, LabelSize, PopoverMenu, StyledExt, Tooltip, h_flex, v_flex,
+    IconName, Label, LabelCommon, LabelSize, PopoverMenu, StyledExt, Tooltip, WithScrollbar,
+    h_flex, v_flex,
 };
 use workspace::{
     Event as WorkspaceEvent, SplitDirection, ToolbarItemEvent, ToolbarItemLocation,
@@ -487,7 +488,7 @@ impl SyntaxTreeView {
 }
 
 impl Render for SyntaxTreeView {
-    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         div()
             .flex_1()
             .bg(cx.theme().colors().editor_background)
@@ -512,6 +513,8 @@ impl Render for SyntaxTreeView {
                         .text_bg(cx.theme().colors().background)
                         .into_any_element(),
                     )
+                    .vertical_scrollbar_for(self.list_scroll_handle.clone(), window, cx)
+                    .into_any_element()
                 } else {
                     let inner_content = v_flex()
                         .items_center()
@@ -540,6 +543,7 @@ impl Render for SyntaxTreeView {
                         .size_full()
                         .justify_center()
                         .child(inner_content)
+                        .into_any_element()
                 }
             })
     }

crates/markdown_preview/src/markdown_preview_view.rs

@@ -13,7 +13,7 @@ use gpui::{
 use language::LanguageRegistry;
 use settings::Settings;
 use theme::ThemeSettings;
-use ui::prelude::*;
+use ui::{WithScrollbar, prelude::*};
 use workspace::item::{Item, ItemHandle};
 use workspace::{Pane, Workspace};
 
@@ -481,7 +481,7 @@ impl Item for MarkdownPreviewView {
 }
 
 impl Render for MarkdownPreviewView {
-    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
         let buffer_size = ThemeSettings::get_global(cx).buffer_font_size(cx);
         let buffer_line_height = ThemeSettings::get_global(cx).buffer_line_height;
 
@@ -598,5 +598,6 @@ impl Render for MarkdownPreviewView {
                     .size_full(),
                 )
             }))
+            .vertical_scrollbar_for(self.list_state.clone(), window, cx)
     }
 }