When loading a page on the v3 guidance site for the first time, the subsection nav on the left-hand side has a constant scroll bar appearing, even on pages where there aren't enough options to warrant a scroll bar.
Additionally, because the updateNavigationHeight function does not run until the user scrolls, pages like the components page which do have overflows do not have an enabled scrollbar.
Firefox (w/ dark mode so the height issue is easier to see):
🧐 Expected behaviour
Firstly, I would expect the scrollbar to only appear when needed, to not confuse users. Secondly, I would expect the view height to be set on page load, not after the first interaction with the page.
Additional info
Potentially setting the .scroll class to conditionally apply would solve the issue. Or figuring out why it is overflowing in the first place. As for the size issue, could the sizing function be called in the useEffect hook, after being added to the event listeners?
Summary of the bug
When loading a page on the v3 guidance site for the first time, the subsection nav on the left-hand side has a constant scroll bar appearing, even on pages where there aren't enough options to warrant a scroll bar.
Additionally, because the
updateNavigationHeightfunction does not run until the user scrolls, pages like the components page which do have overflows do not have an enabled scrollbar.🪜 How to reproduce
Tell us the steps to reproduce the problem:
📸 Screenshots or code
Chrome:
Firefox (w/ dark mode so the height issue is easier to see):
🧐 Expected behaviour
Firstly, I would expect the scrollbar to only appear when needed, to not confuse users. Secondly, I would expect the view height to be set on page load, not after the first interaction with the page.
Additional info
Potentially setting the
.scrollclass to conditionally apply would solve the issue. Or figuring out why it is overflowing in the first place. As for the size issue, could the sizing function be called in the useEffect hook, after being added to the event listeners?