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

Screen Shot 2020-11-06 at 8.18.59 AM.png (1×2 px, 350 KB)

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

image.png (726×1 px, 481 KB)

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:

Screen Shot 2021-01-12 at 1.58.38 AM.png (384×1 px, 139 KB)
Screen Shot 2021-01-12 at 1.58.55 AM.png (470×1 px, 166 KB)
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:

Screen Shot 2021-01-12 at 1.34.58 AM.png (672×676 px, 100 KB)
Screen Shot 2021-01-12 at 1.35.55 AM.png (502×710 px, 81 KB)
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:

Screen Shot 2021-01-12 at 2.32.59 AM.png (484×1 px, 154 KB)
Screen Shot 2021-01-12 at 2.33.44 AM.png (446×1 px, 170 KB)

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.

Screen Shot 2021-01-12 at 1.50.06 PM.png (530×720 px, 91 KB)
Screen Shot 2021-01-12 at 1.51.04 PM.png (518×1 px, 183 KB)
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:

Screen Shot 2021-01-12 at 2.32.59 AM.png (484×1 px, 154 KB)
Screen Shot 2021-01-12 at 2.33.44 AM.png (446×1 px, 170 KB)

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
Screen Shot 2021-01-25 at 2.05.58 PM.png (463×689 px, 130 KB)
Screen Shot 2021-01-25 at 2.05.22 PM.png (483×643 px, 89 KB)

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.

Screen Shot 2021-01-26 at 9.40.55 AM.png (1×2 px, 275 KB)

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

Screen Shot 2021-01-28 at 7.00.23 AM.png (816×1 px, 277 KB)

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

Screen Shot 2021-01-31 at 11.59.47 AM.png (1×1 px, 489 KB)

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.

ezgif.com-gif-maker (4).gif (884×776 px, 3 MB)

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

Screen Shot 2021-01-31 at 12.16.52 PM.png (427×720 px, 93 KB)

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

Screen Shot 2021-02-02 at 3.26.59 PM.png (738×528 px, 100 KB)

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)

Screen Shot 2021-02-23 at 6.24.36 AM.png (894×1 px, 410 KB)

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.

Screen Shot 2021-02-23 at 6.25.50 AM.png (895×749 px, 308 KB)

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

Screen Shot 2021-02-23 at 6.26.54 AM.png (894×734 px, 301 KB)

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

Looks good, resolving!