Scroll Issues in Docs (overflow-anchor)

[yaralahruthik]

Bug report

Packages affected

• [x] sandpack docs

Description of the problem

I am building an interactive course where I noticed a particular issue with scroll. Basically, if there is scroll inside the sandpack and also the browser has a scroll.

Note: It only happens with Nextra (the docs use it) and chromium based browsers.

The attached jam link will help better understand the problem.

The fix is to use overflow-anchor: none on the closest parent! (But not sure of any regressions it would cause)

What steps can we take to reproduce the problem?

https://jam.dev/c/0a712253-3b4e-48d7-b702-448b70abcf0f

Your Environment

Software	Name/Version
Sandpack-react version	^2.12.0
Browser	Chromium
Operating System	MacOS 14.2.1 (23C71)