The latest updates on your projects. Learn more about Vercel for Git ↗︎

🦋 Changeset detected

Latest commit: de7ce88

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Awesome stuff! Here is a preview of what the scrollbars look like for me on Windows/Firefox:

Sharing a few more screenshots and context. We took a look at your amazing contribution today in a Talkign & Doc'ing session on Discord. It's a great way to have feedback from more people and it's particularly useful for visual changes as people have different browsers, screen sizes, OS, etc.

macOS with the default scrollbar settings and a mouse plugged in

macOS with the default scrollbar settings and no mouse plugged in

Linux with an extension to tweak the sidebar appearance

To summarize the feedback we got:

• It can definitely feels weird to have, depending on your browser window size, a potential floating scrollbar for the table of contents.
• It maybe could be helpful if "On this page" was always visible, maybe sticked to the top.

Personally, I think this can be pondered with the fact that the comparison is between no sidebar at all at the moment and in the PR preview, having one, so it's definitely a big change. It's also something that would only be visible on pages with a fairly long table of contents, which is not the majority of the pages.

I'll try to research a bit more the topic and see if some other websites have other approaches to this, but so far I did not find any that would be particularly relevant so I think the PR is already an amazing step forward.

@BryceRussell @HiDeoo - Thanks for sharing the screenshots on other devices/browsers and for reviewing the PR in Talking and Docs, seems like a great way to collect feedback!

Regarding @HiDeoo's thoughts:

1. Agreed on it feeling weird on having a scrollbar on the page. I do think it's a necessary step forward for accessibility and UX in general but, especially on smaller window sizes, it is a bit overwhelming to be honest. This is part of the reason why I was suggesting in right nav toc gives no visual indication its scrollable #1746 that a "thin" or "styled" scrollbar might be beneficial as I think it's a bit "less" overwhelming given the width. If you haven't yet, take a look at the updated POC (details here) I put together to get a sense of what this would look like. The more I thought about this, if we do add "thin" styling, I think adding to just left nav & right nav as opposed to everywhere throughout Starlight anywhere a scrollbar could appear would be most appropriate. Another thought here is possibly to consider adding a frontmatter (or Starlight) configuration for "disable scroll" so users have the choice of whether or not they want scrollbar (could always be overridden via CSS as well).
2. "On this Page" - I did consider sticking this to the top originally but after reviewing other sites, came to the decision to let it scroll. I landed on that decision for a couple of reasons: 1) Other than React.dev, all the other sites (VueJS, Vercel, nextra, etc.) I reviewed do not have it stick (Docusaurus doesn't even have a header at top of TOC); and 2) The important part of the TOC is the list items themselves as users know what the sidebar is for once they initially see "On this Page" so it seemed more appropriate to show as many of the items as possible since that it why users would be scrolling that area.

Look forward to hearing more thoughts on this and happy to make any adjustments to the PR, thank you!

I'll add that, especially given the feedback shared thus far, my recommendation would be to default to having scrollbars when content overflows (as opposed to a config option since user could override via CSS if they want to disable) and add "thin" styling to the scrollbar, defaulting to standard thin (scrollbar-width: thin) with a fallback to webkit for browsers do not yet support scrollbar-width). It would behave like the following config from the POC.

Adding a small reminder for myself as I forgot to do that today: I would like to see what is the end result with thin scrollbars when using an extension such as the one rendering the gold scrollbars and if the larger size configured in the extension is respected in such cases.