Page MenuHomePhabricator

"More" tab dropdown options go off-screen in RTL when there are no margins
Closed, ResolvedPublic2 Estimated Story Points

Description

The more menu is clipped when the margin is absent in our sites on RTL

As you can see in this screenshot with margins, the more menu in the top left corner is not aligned correctly with the more menu

When the screen resolution shrinks to around 1024x this results in the more menu disappearing off the page

Expected:
The left side of the more menu should be aligned to the more button on RTL wikis

QA Results - Beta

ACStatusDetails
1T267325#6783902

QA Results -Prod

ACStatusDetails
1T267325#6852656

Event Timeline

Aklapper renamed this task from Cropped out options in "More" section to "More" tab dropdown options go off-screen in RTL.Nov 5 2020, 2:31 PM
Aklapper added a project: RTL.

I'm not 100% sure this is exclusively happening on RTL wikis. I will check.

But it has a scroll in enwiki, not in fawiki...

What screen resolution is that and what device? Good news is that it should be fixed in T264206 in current deploy.

What screen resolution is that and what device? Good news is that it should be fixed in T264206 in current deploy.

The user says it's a desktop (laptop) with resolution of 1024x768px

Jdlrobson renamed this task from "More" tab dropdown options go off-screen in RTL to "More" tab dropdown options go off-screen in RTL when there are no margins.Nov 6 2020, 4:20 PM
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

Okay thanks for clarifying. Yes this will be improved in next deploy but not fixed so we need to do something here.

We'll need to update the CSS. We need to disable the CSS Janus rtl flipping that occurs here.

Note this impacts the newly proposed anguage switcher too.

This happens because on legacy Vector, the search box provides enough space for the more menu underneath it:

current more menu (legacy Vector)current more menu (legacy Vector)

In modern Vector, without the extra space provided by the search-box, the text is very likely to fall off the edge of the page. I think this could be an issue at smaller resolutions for many languages with long words, leading to horizontal scrolling.

Instead of adding the /* @noflip */ comment, I think what we can do is right-align the menu instead:

end-aligned menu RTLend-aligned menu LTR

I tried the approach of right-aligning the menu, but then I realized it affects legacy Vector too. The only way it wouldn't look broken in legacy is if we right align the text inside the menu as well:

I’m not sure if design-wise this is acceptable but it would avoid conditional code for modern & legacy Vector.

@Jdlrobson indeed! The 500px patch has the following effect on the more menu.

Modern VectorLegacy Vector

( It should also right-align the text in the menu).

@Jdlrobson I'm curious how complicated it would be make this change to the menu modern-Vector specific?

Also just want to loop @alexhollender in on this conversation.

I tried the approach of right-aligning the menu, but then I realized it affects legacy Vector too. The only way it wouldn't look broken in legacy is if we right align the text inside the menu as well:

I’m not sure if design-wise this is acceptable but it would avoid conditional code for modern & legacy Vector.

I'd strongly pledge against right-aligning the menu items themselves. This might even affect folks with readability impairments (need to find the article in my bookmarks talking about this, but this solution would also decrease usability.

This is fixed at lower resolutions e.g < 768px, but not at larger resolutions, so I think we should need to drop a media query somewhere.

Change 658267 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Align the Vcetor menu dropdown list to the end of the "more" button.

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

@Jdlrobson @Jdrewniak @Volker_E this is what I'm currently seeing in production, which looks good to me:

legacy vectorvector

are there any remaining issues here?

Change 658267 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Align the menu dropdown list to the end of the "more" button.

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

@alexhollender the issue the patch above addressed was at larger resolutions, e.g.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

The more menu is clipped when the margin is absent in our sites on RTL

As you can see in this screenshot with margins, the more menu in the top left corner is not aligned correctly with the more menu

When the screen resolution shrinks to around 1024x this results in the more menu disappearing off the page

✅ AC1: The left side of the more menu should be aligned to the more button on RTL wikis

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ❌ FAIL
Environment: hewiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

❌ AC1: The left side of the more menu should be aligned to the more button on RTL wikis

The menu border extends to the left of the More menu border. Additionally, at about 736px the menu goes off the page as seen in the gif below.

With the sidebar collapsed the menu seems to correct at around 720px.

@Edtadros I think this change may not have made the train last week. Looking at it now, I think those issues have been resolved.

Test Result - Prod

Status: ✅ PASS
Environment: hewiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

✅ AC1: The left side of the more menu should be aligned to the more button on RTL wikis (1080px width)

The menu border extends to the left of the More menu border. Additionally, at about 736px the menu goes off the page as seen in the gif below.

With the sidebar collapsed the menu seems to correct at around 720px.

Tested various widths with the sidebar expanded and collapsed. The more menu doesn't flinch. Excellent!

Looks good, resolving!