The Environment page has a text overflow in the sidebar on the left side

[harshtalati2410]

How it looks right now?

Why it should be changed?
The main purpose of the sidebar is to provide easy navigation. But due to the overflow of titles and links on medium and large screens, the user has to scroll within the sidebar to read the title and then navigate to the section.

What I propose to do?
I propose to apply a line break whenever it overflows and to highlight it as one complete title even if it breaks into several lines by applying a gray left border which turn blue when active or hovered.

Please respond as I would like to start working on this immediately.

[harshtalati2410]

Hello, @SableRaf, can you assign this issue to me?

[SableRaf]

Hi @harshtalati2410. Thanks for bringing this up 👍 Could you share a mockup of what you have in mind?

[harshtalati2410]

I suggest doing something like this. This way each option in the sidebar will be distinctly visible and it won't get hidden due to the "overflow: hidden" property of the sidebar. The user will have complete view of each option.

[harshtalati2410]

@SableRaf If there is something else, you would like to suggest please do.
Also, I would like to know if I still hold a chance to contribute further as a part of GSoC.
If so, I would like you to know that I have good experience of using React.JS. I have made myself familiar with the code base of this website as well.

[harshtalati2410]

I have been able to detect some other bugs on the frontend of the website. I would like to work on them as well after this issue.

[SableRaf]

Pinging @runemadsen about the design

[runemadsen]

I think breaking the lines would be good! Just note that this would need to be done with CSS and not by adding the line breaks in the content.

[harshtalati2410]

I have considered that advice. I will open a PR within a few hours.