CSS Variables + Better Web Component Styling

[taybenlor]

This PR adds new CSS variables to the runno-run web component:

--runno-editor-height, --runno-terminal-height, --runno-editor-max-height, --runno-terminal-min-height.

The default look and layout behaviour of the web component has also been improved so that it works nicely without any styling.

[github-actions]

Visit the preview URL for this PR (updated for commit 8ecdcbb):

https://make-run-website--pr189-feat-runno-css-varia-7tds4zjl.web.app

_{(expires Wed, 13 Apr 2022 23:03:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[LukePrior]

I've had a chance to try this out but I've found that --runno-editor-height doesn't actually work unless runno-editor has overflow:auto set, I would suggest setting this on default but if that breaks iframe I would request that it is available to set as a CSS variable. Thanks

[taybenlor]

Did you try setting max height? max-height will effectively override height.

[LukePrior]

max-height doesn't seem to work without overflow:auto:

[LukePrior]

I was also thinking that having a max-height option for the terminal in addition to a min-height could be useful.

[taybenlor]

Okay I'll keep fiddling with how these work. I was hoping the overflow behaviour would "just work" as a result of the flex rules I'd set.

I think for most people the best way to restrict the height of the editor will be to set a height on the runno-run element. For people (like you) who want more control over the individual pieces I think it would be better to have a way to compose together the editor, the terminal and the controls.

[LukePrior]

The problem is even with setting just a height on the runno-run element and not using any other styling including these new variables I still encounter the overflow issue.

runno-run {
    max-height: 60vh;
}

The only way to get the element working (force overflow) for long code snippets is by setting the --runno-editor-height but that isn't ideal as I don't always want it at the maximum size.

[taybenlor]

Can you send me an example? I don't see that same behaviour.

Here I've edited a runno-run element on the Runno website to have a height of 400px and it comfortably scrolls:

[LukePrior]

Ok so I've done some more testing and it works fine if I set a height:400px but if I do max-height:400px then it breaks. I think this only applies to non-iframe versions so I can't replicate it on the website.

I just quickly tested and adding overflow:auto to runno-editor doesn't seem to have any adverse effects and fixes all of these issues. I can open a PR if you want.

[taybenlor]

Yep I just had a play around and can replicate what you're describing. Looks like overflow: auto behaves nicely so I think that's a good default. PR would be great, thanks!