[Bug]: docs-page table-of-contents does not scroll and highlight current paragraph, if not enough height available

[kroeder]

Describe the bug

In docs page, if you click on a table-of-contents item, and there is not enough height available in the docs page, it actually does not change the current state of the table-of-contents.

At work, I dealt with a similar issue (horizontal tabs with scrollable content section). What we did was to use a hidden element that adds as many height as needed to be able to scroll to even the last element in all cases. It produces lots of unused space at the bottom but from a UX perspective, you can now use the toc and scroll + show the current active toc item in all cases.

Specifically, we use a resizeObserver to check if the user browser height changes. If it does, we calculate and apply the needed additional height.

To Reproduce

ttps://stackblitz.com/edit/github-w91kck?file=.storybook%2Fpreview.ts

• Open docs page
• Click on an item and see the same result as in the video capture above

System

No response

Additional context

Alternative solution; Do not add a hidden container at the bottom, leave everything at is but at least underline the last clicked "toc" element. After user-scroll, this obviously would change again but is still less confusing IMO

[vanessayuenn]

At work, I dealt with a similar issue (horizontal tabs with scrollable content section). What we did was to use a hidden element that adds as many height as needed to be able to scroll to even the last element in all cases. It produces lots of unused space at the bottom but from a UX perspective, you can now use the toc and scroll + show the current active toc item in all cases.

Specifically, we use a resizeObserver to check if the user browser height changes. If it does, we calculate and apply the needed additional height.

This seems like a good approach! However, I don't think the team will have capacity to implement this in near future. But PRs are most certainly welcome! ✨

For anyone interested in taking this on: be sure to check the contribution guide and hop onto the Storybook Discord if you need any help getting started.

[maudem]

@vanessayuenn Do you mind if I take this?

[vanessayuenn]

Please do @maudem! Be sure to check the contribution guide and hop onto the Storybook Discord if you need any help getting started. Looking forward to your contribution! ✨