Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(playground): remove redundant vertical scroll bar #10752

Merged
merged 1 commit into from
Mar 28, 2024

Conversation

OnkarRuikar
Copy link
Contributor

Summary

Seeing two y-scrollbars in editors when code is long.

The playground doesn't work in internet archive so it's hard to know when and where the issue appeared. Looking at the current code. Parent wrapper .editor has overflow: scroll set so both x and y scrollbars are always visible. And child wrapper .cm-editor also has height 100% set. As the child has fixed height so when code is long the child also get y-scrollbar.

Solution

Instead of limiting the child .cm-editor height to 100% set min-height: 100%. So the child becomes long and the parent's .editor's scrollbar becomes usable.

Bonus

The code is actually being wrapped so there is no need of x-scrollbar on .editor. So instead of overflow: scroll we could use overflow-y: scroll.

Screenshot

Before

before

After

after

Testing

Ran yarn dev and tried on Chrome, Edge, and Brave browsers on Linux Mint.

Copy link
Contributor

@fiji-flo fiji-flo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot! (the ugly curse of OS depending scroll bars)

@fiji-flo fiji-flo merged commit 3f74a19 into mdn:main Mar 28, 2024
9 checks passed
@OnkarRuikar OnkarRuikar deleted the playground_fix branch March 28, 2024 11:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Playground: Seeing double scrollbars in code editors
2 participants