Change 598545 had a related patch set uploaded (by Bkudiess-msft; owner: Bkudiess-msft):
[mediawiki/skins/Vector@master] Fixes "Contributions" control gets Overlapped in 200% Zoom mode

https://gerrit.wikimedia.org/r/598545

@Bkudiess-msft can you help me understand this bug a little better?

When I zoom to 200% this is what I see depending on which Version of Vector is configured (book don't look great):

Pulling in for analysis since we have a patch.

In T253599#6165925, @Jdlrobson wrote:

In neither I see a "page" control.

I had the same thought.
@Bkudiess-msft do you mean the "User Page" link, by any chance?
That does overlap... the padding-left on #p-personal ul is 11em, compared to the logo's ca. 180px (60px + wgLogos width).

Patch 585629 solves this issue.

Thanks @Bkudiess-msft
@Volker_E I think we may have caused this with https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/596309/ - at least we understand what it was for now. Should we add that back in with explanatory comment?
(I checked and this is not the reason)

I think this is unavoidable given Vector is not a responsive skin. We could apply a minimum width on the article and horizontally scrolling as a short term measure but it feels like working around a bigger problem. I personally would rather wait until we realise the new dropdown personal tools.

@Jdlrobson Changing to display: inline-block instead of float: left fixes it

In T253599#6166386, @Jdlrobson wrote:

I think this is unavoidable given Vector is not a responsive skin.

Legacy Vector worked like this before DI project was started.

In T253599#6166428, @Bkudiess-msft wrote:

@Jdlrobson Changing to display: inline-block instead of float: left fixes it

Both has its benefit and issue:
float: left works better with a slightly wider window, when the menu items break into 2 rows:

With display: inline-block the links overlap the logo and overflow the window on the left. This is less disturbing in some cases, but less usable in others.

inline-block would benefit the narrower window, which is - I presume - the less common, therefore I wouldn't trade float for it.
These use-cases are not intended to be handled by Vector. On desktop there's usually more space, on mobile there's Minerva.

If you often use WP with this width on desktop, you could use the Timeless skin which has a drop-down usermenu.
The new Vector will have a dropdown usermenu too (DEMO), but that's months from now.

With display: inline-block the links overlap the logo and overflow the window on the left. This is less disturbing in some cases, but less usable in others.

@Demian I haven't been able to reproduce this behavior. The only difference I could notice between display: inline-block and float: left is that inline block prevents the overlapping "Contributions" control bug to happen.`

In T253599#6173841, @Bkudiess-msft wrote:

@Demian I haven't been able to reproduce this behavior.

Sorry, I misremembered, thank you for the correction. There's only a small overlap with the logo:

Change 599459 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [modern] Adjust wrapping of personal menu items

https://gerrit.wikimedia.org/r/599459

@Bkudiess-msft for testing: http://patchdemo.wmflabs.org/wikis/c1ea9a325eaea704ff4937249e4a2ba7/w/?useskinversion=2

Change 598545 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Fixes "Contributions" control gets Overlapped in 200% Zoom mode

https://gerrit.wikimedia.org/r/598545

Change 599459 abandoned by Aron Manning:
[modern] Adjust wrapping of personal menu items

https://gerrit.wikimedia.org/r/599459