Issues when content area stretches below the sidebar

[gorkem-bwl]

When the content menu's height is more than the browser window, the sidebar doesn't stretch to the bottom. Under normal conditions (e.g check Settings) the sidebar stretches all the way to the bottom.

This is how it looks for Infra monitor (should be fixed):

This is how it looks for Settings page (the right behaviour):

Also, the "MENU" category name overflows. The sidebar menu should be completely visible regarding the height of the contents area on the right, and MENU category shouldn't overflow.

[RishistavRay]

@gorkem-bwl Can you please assign me this task? I'd like to work on it. Thanks!

[RishistavRay]

I also found increasing the window size, pushes the profile icon and info outside of its container.

Additionally, the left collapsible menu does not have scroll functionality, which is necessary for adding additional items in the future.

[gorkem-bwl]

Go ahead @RishistavRay - please send as many videos/screenshots as possible with your PR as this is a tricky area :)

[ajhollid]

I also found increasing the window size, pushes the profile icon and info outside of its container.

Additionally, the left collapsible menu does not have scroll functionality, which is necessary for adding additional items in the future.

@RishistavRay I don't believe we want scrollability in the sidebar, it should be full window height at all times. @gorkem-bwl can you confirm on this point?

[gorkem-bwl]

@RishistavRay I don't believe we want scrollability in the sidebar, it should be full window height at all times. @gorkem-bwl can you confirm on this point?

I was assuming that we can have full height, but the menu is visible at all times. For example if the content area (on the right) have a 2-page length, and the user wants to scroll to the bottom, menu can still be visible. What do you think?

[RishistavRay]

@gorkem-bwl Yes you can have the menu height cover the entire height of the window (regardless of how long the content page is)

The scrollability @ajhollid is mentioning was my suggestion for the case where content area (on the right) is shorter than the minimum height of the left menu to display all items

Here, half the menu is inaccessible due to lack of scrolling, but you can scroll the content area on the right.
Here's a rough implementation,

[gorkem-bwl]

Right - got it now :) Your video is very clear and to the point. I think this is what we need to do. Such a small screen is usually for mobile devices and I don't think anyone would see such behaviour on a laptop/desktop. Hence, in case of a mobile device, can you also think of a hamburger menu, so that the content area is larger and we have more space for graphs?

[RishistavRay]

It's not a small screen issue. This issue is prevalent on a desktop screen with 110% zoom and above. This can also make it an accessibility issue for regular users and farsighted users.

Here you can see Docs and Changelog (items of the Other sub-menu) are inaccessible at 120% zoom

Lets recap:

1. I'm working on a PR that addresses the issues explained in the ticket's description
2. We can decide whether scrolling should or should not be included
3. I can certainly look into designing and implementing a hamburger-style menu for phone screens as part of a separate enhancement effort.

Let me know your thoughts :)