Freecodecamp: [beta][UI][UX] Change the instructions panel width

[tommygebru]

Changing the instructions panel width will improve readability, understanding of new concepts and overall challenge, it is currently much too narrow!

Currently Narrow:

Change in width:

[tommygebru]

Also I suggest that the scrollbar for the instructions panel is also hidden to help widen the instruction material.
This can be done with ::-webkit-scrollbar{display:none;}
In its place we can provide a border for the parent div border-right: solid 1 px aliceblue

[SanjayPatel16]

Can i work on it?

[tommygebru]

you can try @SanjayPatel16

[Bouncey]

@tommygebru how would I scroll the instruction panel without the scroll bars?

[raisedadead]

@SanjayPatel16 Thanks for your interest. This issue is not yet confirmed to be needing a change.
I recommend you have a look at the Guidelines for Contributing, and look for issues with help wanted tag to contribute.

[raisedadead]

@Bouncey I think what @tommygebru is trying to suggest is that we have a scroll only on on the main body, and rest all "could" be having separators.

I am not sure on that.

But, that said, the instruction panel is narrow, and we have a multi tab editor in plan. That might give us a better UX.

[tommygebru]

@Bouncey I dont mean to remove it, just replace 😉

@raisedadead its nice to hear about a new layout in plan, I think a fairly simple layout can be - having a collapsible instructions panel, and with that change have the ouptut + test case section below the editor 🤔

Also I did mention in this issue #13224 that there needs to be better sizing solutions, because if there are 4 scrollbars to a challenge page that means there are 1 to many

[no-stack-dub-sack]

@raisedadead @Bouncey I think what he's saying with the scroll bar, is not to remove it, just to hide it so that you don't actually see it when you're scrolling. I actually think this part of it is a good suggestion, as it often gets in the way when scrolling through the narrow instructions pane

This could be a decent stop gap until the multi-tab UI is implemented

[tommygebru]

@no-stack-dub-sack do you have a sketch or mockup for the multi-tab UI, I think i understand what it is but I am not sure what the end result will be...