Page MenuHomePhabricator

"Contributions" control gets Overlapped with "Page" control in 200% Zoom mode
Closed, ResolvedPublicBUG REPORT

Description

Steps to Reproduce:

  • Go to a page
  • Zoom the screen to 200%
  • Verify "Contributions" control gets Overlapped with "Page" control.

Actual Results:

  • "Contributions" control gets Overlapped with "Page" control.

Expected Results:

  • Controls shouldn't get overlapped on page

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 25 2020, 10:39 PM

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):



In neither I see a "page" control. Are you talking about one of the controls in these screenshots or an extension or gadget? Could you maybe share a screenshot?

Pulling in for analysis since we have a patch.

Demian added a subscriber: Demian.EditedMay 26 2020, 5:07 PM

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.


@Demian @Jdlrobson This is what I mean, when you zoom in, the navigation buttons on top can have a line break which causes them to overlap with the page and discussions controls

Jdlrobson added a subscriber: Volker_E.EditedMay 26 2020, 5:56 PM

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)

Jdlrobson triaged this task as Low priority.May 26 2020, 5:56 PM

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

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

Legacy Vector worked like this before DI project was started.

@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.`

@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:


That's easily corrected, resulting in 3 well-positioned rows:

or the narrowest Chrome goes: 4 rows, one overlapping (not much can be done about that)

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

Jdlrobson moved this task from Needs triage to Menus on the Vector board.May 29 2020, 1:14 AM

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

Jdlrobson closed this task as Resolved.Jun 5 2020, 4:07 PM

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

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