Code box is only a few lines tall in Firefox

[whmountains]

- Do you want to request a feature or report a bug? Report a bug

- What is the current behavior? The box to type rules is only about 2 lines tall in Firefox. It's the correct height in Chrome.

- If the current behavior is a bug, please provide the steps to reproduce. Load the https://play.netlify.com/redirects in Firefox.

- What is the expected behavior? The text box should grow to fill the window.

- Please mention your Elm, node.js, and operating system version. Mac OS Sierra. Firefox 53.

The following CSS will fix the problem:

.main {
  height: 100%;
}

[calavera]

I'm quite bad at css 😔 thanks for reporting this issue, I'll try to fix it.

[whmountains]

Cool, thanks for looking into that! I should mention how cool I think it is that you're using Elm for this. I haven't tried it yet but it's on my bucket list. Are you just using it for the playground or is it a standard part of your stack?

You might also want to change the css for the height of main (the element, not the class). Right now, you have it set at height: 90%; but that makes a variable spacing at the bottom of the page depending on the size of the window. Unless that's intentional, you could change that to height: calc(100% - 2.8em); and add box-sizing: border-box; which would make a consistent height.

[calavera]

Are you just using it for the playground or is it a standard part of your stack?

We have a few other projects and I'd like to use it more, our main projects use Javascript+React though.

This is another fun project in Elm: https://github.com/netlify/netlify-context-explorer