Skip to content

right nav toc gives no visual indication its scrollable #1746

Open
@techfg

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:

  1. There is no visual indication that the element is scrollable.
  2. 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:

  1. 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
  2. Using the window vertical scrollbar, scroll down to bottom of the page

Expected Result:

  1. The toc should give some visual indication that it separately scrollable; OR
  2. 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:

  1. Add a vertical scroll (e.g., https://react.dev/reference/react-dom/components/common)
  2. Make it sticky (e.g., https://vuejs.org/glossary/)
  3. Add scroll listener to keep main-pane & starlight-toc always in sync (e.g., https://vercel.com/docs/projects/overview)
  4. 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions