Page MenuHomePhabricator

[Regression] Large dropdowns take up visible space even when closed
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

NOTE: THis is easily replicated on the main page, since those pages have lots of languages and the main page is generally shorter than that, but this issue will also impact stub pages with lots of languages.

Steps to replicate the issue (include links if applicable):

What happens?:
On the main page at the bottom there is a white gap.

What should have happened instead?:
No white gap.

wiki1.PNG (876×1 px, 52 KB)

Developer notes

This looks like a regression relating to the recent menu refactorings. The language button is using the checkbox hack dropdown menu. The list of languages is very long and that's what's causing the whitespace here. This previously used display:none to avoid this but I think we've broken this with attempts to make the skin more acceessible.

Event Timeline

Aklapper renamed this task from Main page - white gap v-22 to Huge empty area at bottom of pl.wiki main page in Vector 2022.Aug 4 2022, 4:30 AM
Aklapper updated the task description. (Show Details)

This seems to be triggered by the vector-menu-content-list of the interlanguage-selector being at the bottom.

Jdlrobson renamed this task from Huge empty area at bottom of pl.wiki main page in Vector 2022 to [Regression] Large dropdowns take up visible space even when closed.EditedAug 5 2022, 6:54 AM
Jdlrobson added a project: Regression.
Jdlrobson updated the task description. (Show Details)
Jdlrobson added subscribers: bwang, Jdrewniak, Jdlrobson.

@bwang @Jdrewniak it looks like we switched to .mixin-screen-reader-text for dropdown menus. This is not going to work for long menus (e.g. language dropdown) without some rethinking and I believe was the main reason we used display:none before. Would it be easy enough to revert the change that introduced this for now (or at least limit the rule to screen readers some how)?

I guess we could try adding overflow:hidden to .mw-content-container as a short term fix but that may result in other problems. It's probably worth a go, though!

Another idea would be to add a max-height which would at least limit the amount of whitespace.

This seems to be triggered by the vector-menu-content-list of the interlanguage-selector being at the bottom.

Can I ask why the language dropdown was moved to the bottom?

Sure, but let's continue the discussion on that separately to keep this task just about the bug. I'll reach out to you.

Change 821253 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Prevent collapsed dropdowns from having height.

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

@Jdlrobson the dropdowns have been using opacity & visibility for the hidden state since at least last year, so I'm not sure why this issue would reveal itself now. Regardless, I think adding height:0 & overflow:hidden; to the collapsed state should be enough to fix this issue.

Ack. Perhaps pre-grid this was not a problem due to some kind of overflow? Thanks for taking the time to suggest a fix here!

Change 821253 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Prevent collapsed dropdowns from having height.

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

ovasileva subscribed.

Confirming no white gap appears at bottom of page and resolving

Screen Shot 2022-08-25 at 10.57.51 AM.png (1×2 px, 343 KB)