Modal window for site language in Settings > General > Language has undesired scrollbars

[zdenys]

Quick summary

Modal window for site language in Settings > General > Language has undesired scrollbars

Screen.Recording.2021-09-18.at.17.31.45.mov

Steps to reproduce

1. Go to Settings > General > Language
2. Click the language
3. Observe the modal window

What you expected to happen

The modal window used to look different and could fit the list of languages without any horizontal and vertical scroll bars

What actually happened

The modal window cannot fit the list of languages and has undesired horizontal scroll bars

Context

No response

Operating System

macOS

Browser

Google Chrome/Chromium

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No

Other notes

I cannot reproduce 100% of the time, but refreshing the page and switching to a different site helps bring up the issue.

Additionally, here is the view of Google Inspector:

Screen.Recording.2021-09-18.at.17.36.17.mov

Reproducibility

Intermittent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Refresh the page until the issue is gone.

[Robertght]

Thank you for reporting this @zdenys ! I can't see the scrollbars continuously but there's definitely a shift in the layout. I was also able to see a more organized layout once but I can't bring it back - not sure what I did.

Now:

[dpasque]

Upping priority to normal because the entire layout is all shifted.

[scinos]

Testing old Calypso versions suggests the bug was introduced by #54793

[mattwiebe]

The layout is also broken in the /new Gutenboarding flow:

[noahtallen]

The language picker is written with Flex components from @wordpress/components. This package was updated from v13.x to v17.x in the React 17 PR. I notice this item in the changelog from the v14 release: Flex, FlexBlock, and FlexItem components have been re-written from the ground up (#31297).

Seems like a good place to start investigating. I'll see what I can find!