3185 / Fix NavigationDrawer Overflow

[jordan-sussman]

Link:
closes #3185

Description:
Fixes a reported issue where short viewports cause the navigation drawer component to overflow past the main table, causing unexpected whitespace when scrolled to the bottom.

Fix:
Adds overflow-y: auto to StyledContainer allowing users to scroll for overflow items and preventing unexpected whitespace.

[github-actions]

CLA

Hello there and welcome to our project!
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.
Although we don't have a dedicated legal counsel, having this kind of agreement can protect us from potential legal issues or patent trolls.
Thank you for your understanding.

Generated by 🚫 dangerJS against e04a7e7

[charlesBochet]

Thanks @jordan-sussman.
I have tested the solution and it feels weird that the whole scrollbar is scrolling. Could you actually add a ScrollWrapper on all menuItems but not including the WorkspaceName and Logo on top?

[jordan-sussman]

@charlesBochet Hi! That's possible but would prevent users from getting to all sections on shorter viewports. That said, I think this PR is worth fixing the unexpected white space that was initially reported. Separately, it could be worth another ticket to make sections collapsable, but that'd be outside the scope of the initially reported issue. What do you think?

[charlesBochet]

@jordan-sussman I would give it a try with the ScrollWrapper and with the workspaceName not being scrollable. I think that even with a very small viewport, it should be OK!

I've checked many website designs and I don't see any having the whole navbar scrolling!

[jordan-sussman]

@charlesBochet I've moved the overflow attribute to the items container, which fixes the initial issue and the preference to scroll all menu items but not the header workspace name/logo.

[charlesBochet]

Ok! This looks acceptable, I'll merge it as it is, thank you!

[charlesBochet]

Thank you!