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

[uillianluiz]

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
   

[systimotic]

Thanks for reporting this issue @uillianluiz!
I can confirm that this is an issue, I ran into this a few times while working on the beta as well. I'm looking into a fix. If it's simple, expect a pull request soon, if it's complicated, I'll mark this "help wanted" 😄

Edit: Yeah, this seems a bit above my level right now. I need to learn some Redux first

[ghost]

Could you describe how to reproduce this issue? I can't get the side panel to behave like in the screenshots. Although in my case, the div's height remains static in single column mode (i.e. limited width). I'm using Chrome for Mac.

[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.

[ghost]

OK, I can reproduce the issue now. However, I'm beginning to think this might be a feature instead of a bug. It looks like @BerkeleyTrue disabled height updating for beta mode in this commit: https://github.com/freeCodeCamp/freeCodeCamp/commit/e173463cdb6362441a409b354479ffd42985aeaf. Or am I mistaken?

[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%.

[systimotic]

@BerkeleyTrue Thanks for the update! How should we continue this? I like the idea of making the header not sticky.

[BerkeleyTrue]

@systimotic Looks like we are go for non sticky headers. This will involve some (probably a lot) of css magic to undo the previous css magic.

Unsticky-ify the navbar so it is part of the normal DOM flow. Removing added extra padding on content. Remove react/javascript code that adds height to challenges.