From 989adde57b4024e2c3c4e255498a6df93f69ce99 Mon Sep 17 00:00:00 2001
From: Finn Evers <finn@zed.dev>
Date: Mon, 15 Sep 2025 12:17:27 +0200
Subject: [PATCH] Add scrollbars to markdown preview and syntax tree view
 (#38183)

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

diff --git a/crates/language_tools/src/syntax_tree_view.rs b/crates/language_tools/src/syntax_tree_view.rs
index 5700d8d487e990937597295fb5bab761a46f2ba3..5a110019ddb229c6b4111663b46b64895befb8ff 100644
--- a/crates/language_tools/src/syntax_tree_view.rs
+++ b/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()
                 }
             })
     }
diff --git a/crates/markdown_preview/src/markdown_preview_view.rs b/crates/markdown_preview/src/markdown_preview_view.rs
index 1121d64655f6c7e02f0b0d621605c9ba1aae7cde..d20ed40b7928186e2caf564be5ff66b0bd04f0d1 100644
--- a/crates/markdown_preview/src/markdown_preview_view.rs
+++ b/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)
     }
 }