markdown: Restore horizontal scrollbars for codeblocks #40736
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
We require contributors to sign our Contributor License Agreement, and we don't have @xipeng-jin on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'. |
Contributor
Author
|
@cla-bot check |
cla-bot
bot
added
the
cla-signed
|
The cla-bot has been summoned, and re-checked this pull request! |
SomeoneToIgnore
added
the
area:ai
xipeng-jin
force-pushed
the
issue/agent-pane-code-scroll
branch
from
51af21b to
4df87cd
Compare
xipeng-jin
force-pushed
the
issue/agent-pane-code-scroll
branch
from
4df87cd to
4f915a3
Compare
xipeng-jin
commented
Oct 23, 2025
| cx, | ||
| ); | ||
|
|
||
| let mut parent_container: AnyDiv = if let Some(scroll_handle) = |
Contributor
Author
There was a problem hiding this comment.
I am not sure this is the desire way to give the default horizontal scrollbar option with CodeBlockRenderer::Custom type. This will add the scrollbar on top of the parent_container on default, so the following transform function might not work as previous design. I am happy to hear any opinions on this. Thanks
Member
|
Thanks for this! Looks like we can/should get rid of the Custom markdown code block renderer, but that can be a separate PR. |
Contributor
Author
|
Thank you very much for helping me fix the CI tests issue and merged this PR. As @ConradIrwin mentioned, we can probably get rid of the |
tomatitito
pushed a commit
to tomatitito/zed
that referenced
this pull request
Nov 7, 2025
…s#40736) ### Summary Restore the agent pane’s code-block horizontal scrollbar for easier scrolling without trackpad and preserve individual scroll state across multiple code blocks. ### Motivation Addresses zed-industries#34224, where agent responses with wide code snippets couldn’t be scrolled horizontally in the panel. Previously there is no visual effect for scrollbar to let the user move the code snippet and it was not obviously to use trackpad or hold down `shift` while scrolling. This PR will ensure the user being able to only use their mouse to drag the horizontal scrollbar to show the complete line when the code overflow the width of code block. ### Changes - Support auto-hide horizontal scrollbar for rendering code block in agent panel by adding scrollbar support in markdown.rs - Add `code_block_scroll_handles` cache in _crates/markdown/src/markdown.rs_ to give each code block a persistent `ScrollHandle`. - Wrap rendered code blocks with custom horizontal scrollbars that match the vertical scrollbar styling and track hover visibility. - Retain or clear scroll handles based on whether horizontal overflow is enabled, preventing leaks when the markdown re-renders. ### How to Test 1. Open the agent panel, request code generation, and ensure wide snippets show a horizontal scrollbar on hover. 3. Scroll horizontally, navigate away (e.g., change tabs or trigger a re-render), and confirm the scroll position sticks when returning. 5. Toggle horizontal overflow styling off/on (if applicable) and verify scrollbars appear or disappear appropriately. ### Screenshots / Demos (if UI change) https://github.com/user-attachments/assets/e23f94d9-8fe3-42f5-8f77-81b1005a14c8 ### Notes for Reviewers - This is my first time contribution for `zed`, sorry for any code patten inconsistency. So please let me know if you have any comments and suggestions to make the code pattern consistent and easy to maintain. - For now, the horizontal scrollbar is not configurable from the setting and the style is fixed with the same design as the vertical one. I am happy to readjust this setting to fit the needs. - Please let me know if you think any behaviors or designs need to be changed for the scrollbar. - All changes live inside _crates/markdown/src/markdown.rs_; no API surface changes. Closes zed-industries#34224 ### Release Notes: - AI: Show horizontal scroll-bars in wide markdown elements
bennetbo
pushed a commit
that referenced
this pull request
Nov 8, 2025
Follow up #40736 Clean up `CodeBlockRenderer::Custom` related rendering per the previous PR [comment](#40736 (comment)). Additional note here: 1. The `Custom` variant in the enum `CodeBlockRenderer` will become not useful since cleaning all code related to the custom rendering logic. 2. Need to further review the usage of code block `metadata` field in `MarkdownTag::CodeBlock` enum. I would like to have the team further review my note above so that we can make sure it will be safe to clean it up and will not affect any potential future features will be built on top of it. Thank you! Release Notes: - N/A
11happy
pushed a commit
to 11happy/zed
that referenced
this pull request
Dec 1, 2025
…s#40736) ### Summary Restore the agent pane’s code-block horizontal scrollbar for easier scrolling without trackpad and preserve individual scroll state across multiple code blocks. ### Motivation Addresses zed-industries#34224, where agent responses with wide code snippets couldn’t be scrolled horizontally in the panel. Previously there is no visual effect for scrollbar to let the user move the code snippet and it was not obviously to use trackpad or hold down `shift` while scrolling. This PR will ensure the user being able to only use their mouse to drag the horizontal scrollbar to show the complete line when the code overflow the width of code block. ### Changes - Support auto-hide horizontal scrollbar for rendering code block in agent panel by adding scrollbar support in markdown.rs - Add `code_block_scroll_handles` cache in _crates/markdown/src/markdown.rs_ to give each code block a persistent `ScrollHandle`. - Wrap rendered code blocks with custom horizontal scrollbars that match the vertical scrollbar styling and track hover visibility. - Retain or clear scroll handles based on whether horizontal overflow is enabled, preventing leaks when the markdown re-renders. ### How to Test 1. Open the agent panel, request code generation, and ensure wide snippets show a horizontal scrollbar on hover. 3. Scroll horizontally, navigate away (e.g., change tabs or trigger a re-render), and confirm the scroll position sticks when returning. 5. Toggle horizontal overflow styling off/on (if applicable) and verify scrollbars appear or disappear appropriately. ### Screenshots / Demos (if UI change) https://github.com/user-attachments/assets/e23f94d9-8fe3-42f5-8f77-81b1005a14c8 ### Notes for Reviewers - This is my first time contribution for `zed`, sorry for any code patten inconsistency. So please let me know if you have any comments and suggestions to make the code pattern consistent and easy to maintain. - For now, the horizontal scrollbar is not configurable from the setting and the style is fixed with the same design as the vertical one. I am happy to readjust this setting to fit the needs. - Please let me know if you think any behaviors or designs need to be changed for the scrollbar. - All changes live inside _crates/markdown/src/markdown.rs_; no API surface changes. Closes zed-industries#34224 ### Release Notes: - AI: Show horizontal scroll-bars in wide markdown elements
11happy
pushed a commit
to 11happy/zed
that referenced
this pull request
Dec 1, 2025
…es#42211) Follow up zed-industries#40736 Clean up `CodeBlockRenderer::Custom` related rendering per the previous PR [comment](zed-industries#40736 (comment)). Additional note here: 1. The `Custom` variant in the enum `CodeBlockRenderer` will become not useful since cleaning all code related to the custom rendering logic. 2. Need to further review the usage of code block `metadata` field in `MarkdownTag::CodeBlock` enum. I would like to have the team further review my note above so that we can make sure it will be safe to clean it up and will not affect any potential future features will be built on top of it. Thank you! Release Notes: - N/A
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Restore the agent pane’s code-block horizontal scrollbar for easier scrolling without trackpad and preserve individual scroll state across multiple code blocks.
Motivation
Addresses #34224, where agent responses with wide code snippets couldn’t be scrolled horizontally in the panel. Previously there is no visual effect for scrollbar to let the user move the code snippet and it was not obviously to use trackpad or hold down
shiftwhile scrolling. This PR will ensure the user being able to only use their mouse to drag the horizontal scrollbar to show the complete line when the code overflow the width of code block.Changes
code_block_scroll_handlescache in crates/markdown/src/markdown.rs to give each code block a persistentScrollHandle.How to Test
Screenshots / Demos (if UI change)
Screen.Recording.2025-10-20.at.3.54.35.PM.mov
Notes for Reviewers
zed, sorry for any code patten inconsistency. So please let me know if you have any comments and suggestions to make the code pattern consistent and easy to maintain.Closes #34224
Release Notes: