Playground Style Improvement

[ghost]

Dear, Maintainer.

I do this PR because #105 about making playground look nicer.
The thing i done :

• Adding horizontal scroll in Logging section.
• Add change view button for switch Editor and Client expand.

This how it look like :

[aantron]

With this version, when I first go to http://dream.as/, the bottom line of the log is clipped:

and the horizontal scroll bar is drawn beneath the viewport:

so that there is a vertical scroll bar on the right side of the whole window (see right edge in the above screenshot), and you have to scroll down to see the log's horizontal scroll bar and the rest of the first line.

Also, the new button does not seem to do anything on my browser (Brave).

The version from this PR is deployed right now, so you can take a look.

You should be able to save the HTML as a local file, and maybe even the JS, to help develop this.

[thangngoc89]

vertical scroll bar on the right side of the whole window

This is because the whole layout is starting the break when we add new features. Ideally, everything should be calculated using flex: 100vh for body and everything inside it scale accordingly.

Also, the new button does not seem to do anything on my browser (Brave).

There is error in console. Uncaught TypeError: Cannot set property 'onclick' of null

[thangngoc89]

I would say merge this PR and redo the vertical layout in another PR. Manually calculating height in px is very fragile :) cc @aantron

[aantron]

I would say merge this PR and redo the vertical layout in another PR. Manually calculating height in px is very fragile :) cc @aantron

Very well.

Thanks @artileda for the main work and @thangngoc89 for the review!

I've pushed the latest version as of this PR to dream.as. Happy to see that the button works!