Page MenuHomePhabricator

Horizontal scroll bar on main pages due to language button dropdown
Closed, DeclinedPublic2 Estimated Story Points

Assigned To
None
Authored By
Esanders
Dec 8 2022, 7:01 PM
Referenced Files
F36318268: Screenshot 2023-01-18 at 22.30.39.png
Jan 18 2023, 9:30 PM
F35846423: image.png
Dec 8 2022, 7:14 PM
F35846713: image.png
Dec 8 2022, 7:14 PM
F35846421: image.png
Dec 8 2022, 7:14 PM
F35846414: image.png
Dec 8 2022, 7:01 PM

Description

Device: Desktop Chrome, Ubuntu 20.04

After using the full width toggle I get a horizontal scroll bar and can move 4px to the right:

image.png (1×1 px, 590 KB)

The same issue does not appear on a feature article.

QA steps 2

Visit https://pl.wikipedia.org/wiki/Wikipedia:Strona_g%C5%82%C3%B3wna?useskin=vector-2022 and set screen width to 500px
Expected: no horizontal scroll
Actual: horizontal scroll

Event Timeline

I can reproduce on https://en.wikipedia.org/wiki/Main_Page?useskin=vector-2022. Seems to be caused by the #p-lang-btn-content-container element sticking out too far (a part of the "NN languages" button shown in bottom right corner of the page).

image.png (2×3 px, 460 KB)
image.png (2×3 px, 450 KB)

It doesn't happen on other pages where the button is shown in top right, e.g. https://en.wikipedia.org/wiki/The_Fighting_Temeraire?useskin=vector-2022:

image.png (2×3 px, 1 MB)

The difference is probably because the page title area is hidden on the main page.

Aklapper renamed this task from Full width toggle on en.wiki Main Page triggers horiztonal scroll bar to Full width toggle on en.wiki Main Page triggers horizontal scroll bar.Dec 9 2022, 3:43 AM
ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

Just as some thoughts: The only difference between the main page and every other page is the language selector (Which is at the bottom). And if you override the "float:right" on that element, the bottom scroll bar disappears. So im just going to go ahead and suggest that this has something to do with the language selector...

Looks like this might be Windows specific? Can anyone confirm?

Its broken on my iPhone using safari so I am not too sure about that. On the other hand the language selector itself isn't working properly for me compared to fr wiki, I only see 47 languages compared to 326 and the elements of "vector-menu-content-list" are all missing "Display:none" which they have on fr wiki (Which is what is causing the overflow for me).

I've tried android and iOS but everything seems fine for small screens in both mobile and desktop modes.

On Win10 I can reproduce the bug in Firefox 108, Chrome 109 and Edge 109.

edit: have reproduced bug in Safari on an older iMac

Looks like this might be Windows specific? Can anyone confirm?

Just tried to recreate the bug on an older intel-based iMac (High Sierra 10.13) and although the scroll bar is initially invisible in Safari, you can still reproduce the bug by scrolling left and right.

This is the language selector.

.vector-menu-dropdown > .vector-menu-content
only has visibility:none, so it hides the menu, but its dimensions are still taken into account and it overflows to the right of the viewport at some resolutions.

Screenshot 2023-01-18 at 22.30.39.png (724×1 px, 407 KB)

On other pages the following selector takes effect, but not on the main page positioning.

.vector-page-titlebar .mw-portlet-lang > .vector-menu-content {
  top: auto;
  left: -1px;
  right: -1px;
  box-sizing: border-box;
  max-height: 65vh;
  overflow: auto;
  display: none;
}

Screenshot 2023-01-18 at 22.30.39.png (724×1 px, 407 KB)

The file is not attached to this ticket and cannot be seen by others.

Aklapper renamed this task from Full width toggle on en.wiki Main Page triggers horizontal scroll bar to Full width toggle on en.wiki Main Page triggers horizontal scroll bar due to language selector.Jan 19 2023, 9:20 AM

Not able to reproduce the issue as of this morning

Jdlrobson renamed this task from Full width toggle on en.wiki Main Page triggers horizontal scroll bar due to language selector to Horizontal scroll bar on main pages due to language button dropdown.Feb 27 2023, 5:26 PM
Jdlrobson updated the task description. (Show Details)
ovasileva lowered the priority of this task from High to Medium.Mar 1 2023, 10:56 PM
ovasileva moved this task from Current Fiscal Year to Current Quarter on the Web-Team-Backlog board.
LGoto set the point value for this task to 2.Apr 27 2023, 5:57 PM
ovasileva added subscribers: Edtadros, ovasileva.

@Edtadros - could you take a look and see if we can still reproduce this? I'm not able to from my side.

Unable to replicate and currently being revisited as part of T364015.