right nav toc
gives no visual indication its scrollable #1746
Open
Description
What version of starlight
are you using?
0.21.5
What version of astro
are you using?
4.6.0
What package manager are you using?
pnpm
What operating system are you using?
Linux
What browser are you using?
Chrome, Edge, FIrefox
Describe the Bug
In desktop mode, the toc
appears on the right side of the screen. When the number of items in the list exceeds the viewport height, a couple of issues arise:
- There is no visual indication that the element is scrollable.
- If the number of items in the list exceeds the page content, when scrolled to the bottom of the window, the bottom of the nav is not visible and you must scroll the nav to get to the bottom of it.
Steps to reproduce:
- Open Overrides Page in desktop mode on a screen larger than 72rem and ensuring the height of the window is smaller than the amount of items in the
toc
- Using the window vertical scrollbar, scroll down to bottom of the page
Expected Result:
- The
toc
should give some visual indication that it separately scrollable; OR - The
toc
should scroll with the window
Actual Result:
The toc
does not move when scrolling, the bottom of the toc
is not visible and there is no visual clue that it can be scrolled separately.
Proposed Solutions:
- Add a vertical scroll (e.g., https://react.dev/reference/react-dom/components/common)
- Make it sticky (e.g., https://vuejs.org/glossary/)
- Add scroll listener to keep
main-pane
&starlight-toc
always in sync (e.g., https://vercel.com/docs/projects/overview) - Some combination of the above
Link to Minimal Reproducible Example
https://starlight.astro.build/reference/overrides/
Participation
- I am willing to submit a pull request for this issue.
Metadata
Assignees
Labels
No labels