Layout shift when in docs sidebar when scroll bar appears

[Josh-Cena]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

When a category is expanded, causing the scroll bar to appear, the container is also pushed narrower. This also occasionally causes word wrapping to change, creating an even more visible shift.

Have you read the Contributing Guidelines on issues?

Yes

Steps to reproduce

It's already observed on the Docusaurus site. Navigate to https://docusaurus.io/docs, and expand the "Guides" section. On my screen, this is enough to show the scroll bar. All the arrows on the right are now pushed inwards by 7px (284px -> 277px), creating a quite visible shift.

Below is a more significant demo:

Another bug that this demo exposes: when the container narrows, some text is pushed below the next category, because the next category does not move accordingly when the height changes. However, if the layout shift is fixed, it should go away as well

Expected behavior

The layout should remain consistent.

Actual behavior

The sidebar container is compressed by the scroll bar. This may be fixed by leaving some space (like 10px) as margin.

Your environment

• Docusaurus version used: beta-4
• Environment name and version: Chrome 91.0.4472.164 and Safari 14.1.1
• Operating system and version: Mac OS 10.15.7

[slorber]

Agree this kind of layout shift is quite annoying.

We also have one when opening the search modal due to scrollbar locking.

This CSS property will likely solve the issue and be adopted soon, but for now it has 0% browser support 😅 : https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property

Temporarily, we can try to add some extra padding when scrollbar is not here so that there's no width change when this happens

[Josh-Cena]

Turns out that simply removing the thin-scrollbar class fixes the layout shift:

docusaurus/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

Line 77 in 1f8fa5e

className={clsx('menu thin-scrollbar', styles.menu, {

So the question is, how useful is a persistent scrollbar?

[slorber]

doesn't fix this for me @Josh-Cena

it only fixes it with macos general setting that hides scrollbars unless during scroll.

In french:

Looks like what you have here?

[Josh-Cena]

Ah, don't even know there's such an option

I have the first option, but no idea how it differs from the second one

[slorber]

I have the first option too so I guess it depends on other factors like my mouse?
I don't think removing that class would solve the issue for most users, only a subset of macos users (and I'm not included with my current settings)

[slorber]

Actually disabling my mouse and using the trackpad solve the issue with this class removed and the "automatic" setting. So it's not a very reliable solution.

[Josh-Cena]

so I guess it depends on other factors like my mouse?

Most likely, since I'm using trackpad; probably mouse causes the scroll bar to be always visible?

On the other hand, I have no clue why removing it makes the scroll bar float above the main container while before it squeezes in its own width.

[vlahovivan]

I have the same issue, but it happens only when there is a title longer than one row of text.

When the title is "Što je dinamičko programiranje?" ("What is dynamic programming?") I have this issue:

When the title is "Uvod" ("Introduction"), the issue is gone:

I've tried both in beta-4 and beta-6, the behaviour is the same

[zxuqian]

I have the same issue, but it happens only when there is a title longer than one row of text.

When the title is "Što je dinamičko programiranje?" ("What is dynamic programming?") I have this issue:

When the title is "Uvod" ("Introduction"), the issue is gone:

I've tried both in beta-4 and beta-6, the behaviour is the same

Same here

[argyleink]

could temporarily set overflow-y: scroll; until scrollbar-gutter is out??

Kapture.2021-10-14.at.11.12.16.mp4

[slorber]

Thanks @argyleink, will see if it's a good temp solution for us.

Having a scrollbar always visible is not so great but if it affects only a small number of users that can be good enough.

(for issue context, I asked how to solve this here: https://twitter.com/sebastienlorber/status/1448708892511416320)

[akeller]

I have the same issue, but it happens only when there is a title longer than one row of text.

This looks consistent with our experience and @Josh-Cena's, so our temporary fix will be to shorten the title text length. With the addition of the scroll bar, titles that were previously only one row of text, become two, which is where we see the problem. I'll see if we can think of any creative solutions on our side to actually fix this.

[slorber]

This is fixed in #7134

This uses a new CSS property scrollbar-gutter, not yet supported by latest Safari, so it will be fixed in all browsers as time passes but not instantly.

Note: there's also a similar layout shift related to search, for which we have a separate issue: #7130