New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Content shift when collapsing or expanding the sidebar #7918
Comments
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
I see now 🤪 thanks for clarifying. The markdown page content has changed from smaller to taller. So I'm going to move my comment here and remove it from the older issue. 👇👇👇 This behavior is because we toggle from Changing the dimension of the content container leads to some lines wrapping, leading to the layout shift. It's not the sidebar that changes height, but rather the scroll container that changes dimensions as we toggle the sidebar. You'll notice that the layout shift is more important on larger docs, and at the bottom: this is just because there are more lines wrapping above :) In the end => larger container VS no layout shift: you can only pick one of those. I'd say the layout shift is a minor annoyance and usually we want to expand a bit the content container when more space is available. Technically we could keep the same container size for large desktop screens, but for mobile we absolutely want to increase that container width anyway. It wouldn't make sense to collapse the sidebar and still keep a small content container (< 500px in the screenshot above). What I mean is: layout shifts are expected to happen, on purpose, because we want to expand the length of the lines If you want 0 layout shift, I'd say it's your responsibility to ensure the content container keeps the exact same size. You can do that with CSS. I don't think we'd want Docusaurus to do that by default. Now, a possible solution to mitigate this layout shift, particularly on very large documents where the layout shift can be significant (like the bottom of our deployment page)
Note we already do something similar when switching tabs (cf #5618), that can also produce layout shifts, and have some util already: const {blockElementScrollPositionUntilNextRender} = useScrollPositionBlocker(); This won't prevent new line wraps in the visible viewport. Not even sure it's worth implementing this. Is this layout shift a big deal in the first place and annoying some real users? |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
The displayed portion of the content changes visually when switching between the collapsed and expanded states of the sidebar. When I collapsed and then expanded sidebar at the bottom, the page display jumps from the bottom footer to the content section.
Reproducible demo
https://docusaurus.io/docs/deployment
Steps to reproduce
Demo
video1197996455.mp4
Expected behavior
No content shift when collapsing or expanding the sidebar
Need more expected details from the development team
cc @Josh-Cena
Actual behavior
Before the sidebar is collapsed, the page is at the bottom, but after the sidebar is collapsed and expanded, the page will jump to the
Deploying to Layer0
section.Your environment
Self-service
The text was updated successfully, but these errors were encountered: