🐛 BUG: On Docs theme pressing dark/light input jumps to top

[djmtype]

What version of astro are you using?

1.0.0-beta.73

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

mac

Describe the Bug

When the darkmode toggle appears on the right sidebar and the main content is longer than 100vh, pressing either of these input buttons creates a page jump to the top for a less than ideal user experience. The reading position is lost, leaving the user confused.

Open the Docs example in Stackblitz, resize the window width to ~1100px, then press on dark or light mode buttons to experience the issue.

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/docs?file=README.md&on=stackblitz Screencast: https://cloudup.com/c7Gz2oVu_mG

Participation

• [ ] I am willing to submit a pull request for this issue.

[tony-sull]

Thanks for including the screencast to show what's going on! I can't actually get this to reproduce for me, tried in Stacklitz and locally with both Chrome and Firefox

Any chance you can get an idea of what's triggering the page jump? The ThemeToggleButton.tsx component is just adding/removing a class to the document's root, not quite sure what that could be doing to cause the page to jump 🤔 It almost looks like a page navigation, but there's not an <a> there that would trigger navigation

[djmtype]

@tony-sull This might be a Brave browser issue as Chrome and Safari don't seem to behave that way.