The whole page shifts when the sidebar gets a scrollbar

[corentin-gautier]

Description

When selecting blocks, if the right sidebar doesn't have a scrollbar then suddenly gets one, the whole page shifts to the left, triggering repaint all over the place,

This could be fixed by having an overflow-y: scroll instead of an overflow: auto on the sidebar

Here's an example of the code I have currently to fix this:

// Avoid layout shift on block selection
.interface-interface-skeleton__sidebar:has(.interface-complementary-area) {
  overflow-y: scroll;
}

The issue comes from the fact that the sidebar content width is set to 280px and the sidebar width is set to auto with an overflow auto.

gutenberg/packages/interface/src/components/complementary-area/style.scss

Line 10 in 67fe26f

width: $sidebar-width;

Step-by-step reproduction instructions

1. Go to https://wordpress.org/gutenberg/
2. Select the "Say Hello ..." title block
3. Select the "Try Gutenberg today in WordPress" button

Screenshots, screen recording, code snippet

Screen.Recording.2022-10-28.at.16.00.04.mov

Environment info

• on a screen high enough that sometimes the sidebar content doesn't overflow

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Related to #23427