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