[v13] Fix the top bar going outside the window

[gzdunek]

Backport #33752 to branch/v13

Changelog: Fix the top bar breaking layout when the window is narrow in Connect.

[gzdunek]

Weird, gap seems to be not applied when minWidth: 0 is set on the central element:

I thought that it may be caused by the 0 value, but minWidth: 1px looks almost the same. I think I will just increase a bit the min window width to solve this.

[ravicious]

The gap is being applied, it's the central elements' children that overflow, making it appear as if the gap wasn't applied. You can verify this by adding overflow: hidden to the central element.

Ultimately, I think that min-width: 0 is just a band-aid. AFAIK the real problem is that the top bar contents overflows its parent. The issue might be several flexbox layers deep, we might be able to find it eventually or rewrite the top bar to use grid for everything, if it actually makes it easier to manage this.

For now I agree that the increase of min width of the window seems to be a good enough solution.

The top bar overflowing:

Screen.Recording.2023-10-24.at.11.13.40.mov

[gzdunek]

Ultimately, I think that min-width: 0 is just a band-aid. AFAIK the real problem is that the top bar contents overflows its parent. The issue might be several flexbox layers deep, we might be able to find it eventually or rewrite the top bar to use grid for everything, if it actually makes it easier to manage this.

Eh, I thought that min-width: 0 is a perfect fix for that overflowing child.

I will increase the min window width from 400 to 430px.

[ravicious]

Was this extra change needed only for v13?

[gzdunek]

Yes, for v14 I already increased the min-width.