Double Scrollbars with Terminal Tabs and Full-Height Terminal (in Container)

[karlhorky]

🐛 bug report

Description of the problem

In a CodeSandbox Container, the terminal receives two scrollbars when it's been expanded to the full height of a browser window.

It's kind of hard to see what I'm doing here, but I'm typing in the console while it appears that nothing is happening. You cannot see the input because it is scrolled off of the end of the screen 😞:

As soon as the user types something, the terminal is scrolled up, causing the typing to be obscured.

Reproduction Steps

• open a CodeSandbox Container
• resize the terminal pane to the full height of the window (obscuring the browser preview)
• open a new tab in the terminal
• type in a lot of text so that a scrollbar appears
• notice that any new text entered is not visible on the screen
• to make the effect worse: resize the terminal pane again

Note: I have successfully reproduced this on a 13 inch Retina MacBook Pro on default resolution.

Potentially Related

#1654 (and the pull request from that: #1740)

How has this issue affected you? What are you trying to accomplish?

I would like to type in the terminal and have it show up.

Your Environment

Software	Name/Version
Сodesandbox	PROD-1561557066-4a5dea6e4
Browser	Chrome 75.0.3770.100
Operating System	macOS 10.14.5

[karlhorky]

Seems like it may be related to the incorrect height prop being passed down through the View system:

codesandbox-client/packages/app/src/app/components/Preview/DevTools/Terminal/index.js

Line 198 in e2a5180

height: height - 72,

[karlhorky]

Added reproduction steps. It makes the effect worse to resize the panel multiple times. Maybe there's something off in the height calculation during resize.

[lbogdan]

Hey @karlhorky ,

Thanks for the detailed description, this issue was too long standing already!

I (tried to) fixed it in #2105 , can you please give it a go here https://pr2105.build.csb.dev/s/new ? (it works with the same sandboxes as codesandbox.io). In order to be able to open terminals, you can login by copying the jwt local storage token from codesandbox.io to the PR build domain. Let me need if you need any assistance. Thanks again!

[karlhorky]

Awesome @lbogdan, #2105 is working for me in the preview environment! From my side, ready to 🛳!

[lbogdan]

@karlhorky Did you also stress test it / try to break it? 😃

[karlhorky]

Yep, sure did! Spent a good 2 minutes trying a bunch of different things. Worked well!

[karlhorky]

For anyone following along, #2105 was reverted, and the new PR that is implementing a fix for this is #2060.