fix: enable horizontal scrollbar in code blocks#488
Draft
laileni-aws wants to merge 2 commits into
Draft
Conversation
Code blocks with long lines were impossible to scroll horizontally because two CSS rules conspired to hide the scrollbar: 1. The global webkit-scrollbar:horizontal rule set width/height to 0px, making the scrollbar invisible even though `pre` had `overflow-x: auto`. 2. The `pre` element inside a flex-column parent could expand beyond the parent's constraint without `min-width: 0`, preventing internal scroll. Fix: give `pre` the classic flex-child overflow fix (`min-width: 0`) and restore horizontal scrollbar visibility with a 4px track height.
Pre-existing lint violation that blocked the pre-push hook.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Problem
Code blocks in the chat window have no horizontal scrollbar. Long lines (e.g. multi-flag CLI commands, wide table output) are truncated at the panel edge with no way to view the hidden content.
Solution
Two CSS issues compound to make horizontal scrolling impossible:
Webkit scrollbar rule hides horizontal tracks:
_main-container.scssset::-webkit-scrollbar:horizontal { width: 0px; height: 0px; }which makes the scrollbar invisible in webkit-based browsers (Chrome, Edge, and the JCEF browser embedded in JetBrains IDEs). Fixed by restoring a visibleheight: 4pxtrack.Flex-child overflow: The
preelement inside.mynah-syntax-highlighter(a flex-column container withmax-width: 100%) lackedmin-width: 0, which is the classic fix to prevent flex children from expanding beyond their parent. Without it, theprepushes beyond the parent's constraint instead of scrolling internally. Addedmin-width: 0sooverflow-x: autoonpreworks as intended.What changes for users
overflow-x: autoonly shows when needed)pre-wrapwraps linesTesting
npm run buildcompiles without errorspreelement with long content now shows a thin (4px) horizontal scrollbar track in webkit browserspre-wrapat narrow viewport widths still works (the@media (max-width)rules are untouched)License
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.