[beta] .challenges-instructions-panel div has static height

Challenge Name

Beta challenges

Issue Description

The div .challenges-instructions-panel height is only changed when first loaded. This leads to two problems:

1. Resizing the browser screen up. If the screen height increases, you get a scroll bar in the .challenges-instructions-panel div, and its height remains the same.
2. Resizing the browser screen down. If the screen height reduces, you get a scroll bar in the body, and the .challenges-instructions-panel height remains the same.

This behavior only happens with the BETA.

Browser Information

Tested on both Chrome and Firefox on Windows 10 Desktop.

Screenshot

1. Resizing it up

2. Resizing it down

[BerkeleyTrue]

There are a couple of nested reasons for this.

The first layer: We determine the height of the challenge div at startup and disable auto updates because it is quite expensive to listen to scroll events.

The next layer down: We have to set a static height here because we want the challenge div to be no larger then the users window minus the height of the nav bar, which is a sticky nav bar.

This is largely a css issue that we throw some javascript on top of to patch up.

@QuincyLarson and I have discussed once or twice removing the sticky-ness of the navbar and making it scroll away with the rest of the page. This should solve this issue as we would no longer need to set a static height of the challenge window, we could give it height: 100%.

[uillianluiz]

@leonfeng For one column this problem behaves differently from the cases I showed before, however if you open the windows like this:

Then, you resize its height up, the screen will behave like this:

While if you refresh the page with same height, it will behave like this:

So it is basically because the height of the div is calculated on load, setting the inline style for height. In addition to that, the div .challenges-editor behaves in the same way, with an inline style setting a static height. You just need to play around, refreshing, resizing the screen and you will notice this behavior. While if you do this in the current FCC, it does not happen, the size changes on resize.