The transcript box could only grow, so the only scrollbar was the horizontal one - #89
Merged
Merged
Conversation
…izontal one The Try-it page's output box had a min-height and no max-height. As the reveal appended lines the box got taller and pushed the page down; it never scrolled, because there was no vertical overflow to scroll. The follow-the-newest-line in try-it.js was dead code against it — scrollTop stayed 0 — and the one scrollbar the reader did get was the horizontal one the demo's long lines need. Measured in a browser at 820px wide: the box grew to 910px with scrollHeight equal to clientHeight, and the page grew from 700 to 956. The box now has overflow-y and a max-height of min(60vh, 440px), which makes it a terminal that scrolls rather than a block that grows: it holds at 452px and scrolls to 458, and the page stops growing. The long lines still scroll horizontally inside it, which is what a transcript with aligned columns needs. Following the output is right up until somebody scrolls up to re-read, so the reveal now follows only a reader already within 40px of the bottom, and resumes when they scroll back down. Both verified in a browser.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
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.
The bug
The Try-it page's output box had
minHeight: "180px"and nomaxHeight, nooverflowY. So as the reveal appended lines the box got taller and pushed the page down. It never scrolled vertically, because there was no vertical overflow to scroll — which also madeoutput.scrollTop = output.scrollHeightintry-it.jsdead code. The only scrollbar the reader got was the horizontal one the demo's long lines need.Measured in a headless browser at 820px wide, running the real script against a real transcript:
scrollHeightvsclientHeightscrollTopat the endscrollLeftduring the revealThe fix
overflowY: "auto"andmaxHeight: "min(60vh, 440px)"on the box, so it is a terminal that scrolls rather than a block that grows.overflowX: "auto"andwhiteSpace: "pre"stay: the demo's columns are aligned and must not wrap, so the few long lines scroll inside the box. The page body never scrolls horizontally.Verified in a browser: scrolling up mid-reveal held position at 0 for six seconds, and scrolling back to the bottom resumed following.
Mutation table
maxHeight(the shipped state)overflowYTest note
The full suite is 3902 passed, 45 skipped, with one unrelated failure:
test_the_cli_reference_matches_clicks_help_text. It fails identically on a pristineorigin/maincheckout, because the shared virtualenv resolvesctrlrunto the main working tree, where another branch has uncommittedverify --urlhelp text. Not from this change, and CI installs from the branch.🤖 Generated with Claude Code