Page MenuHomePhabricator

[BUG] Query Builder LanguageSelector options menu is not visible in some tablet sizes
Closed, ResolvedPublic5 Estimated Story PointsBUG REPORT

Description

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

  • Go to https://query.wikidata.org/querybuilder/ in a browser window wider than 608px but narrow enough so that the language selector wraps to a new line in case the language button doesn't fit in the header (e.g. in case a language with a long name is selected, such as "Chavacano de Zamboanga")
  • Open the language selector itself

What happens?:

The language options menu is cut off, overflowing to the left of the page.

image.png (704×614 px, 52 KB)

And overflowing to the right in RTL languages:

image.png (704×694 px, 51 KB)

What should have happened instead?:

Screenshot 2023-08-04 at 16-37-40 Mismatch Finder.png (821×609 px, 67 KB)

The language options menu is visible and is aligned to the language selector button's right side.

Other information (browser name/version, screenshots, etc.):

Seen on Firefox 115.0.2 on Ubuntu 22.04

Notes

This is also occurring on Mismatch Finder https://phabricator.wikimedia.org/T343563

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Bug Report". · View Herald TranscriptAug 15 2023, 9:39 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Task Breakdown Notes:

Change 954908 had a related patch set uploaded (by Hasan Akgün (WMDE); author: Hasan Akgün (WMDE)):

[wikidata/query-builder@master] Fix language selector dropdown menu position

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

@Arian_Bozorg @HasanAkgun_WMDE @Sarai-WMDE I was trying to locally validate the fix during code review, but I cannot reproduce the actual bug that describes this, either on the main branch of query builder or on production. Can you please update the ticket with the conditions under which this happens?

Hey @ItamarWMDE. For the issue to be visible, the viewport needs to be "narrow enough so that the language selector wraps to a new line". This won't usually happen if English is selected, because the button still fits the header. So, to reproduce this, you'll have to select a language with a longer name, such as "Chavacano de Zamboanga":

Screenshot 2023-09-13 at 13.12.36.png (1×1 px, 149 KB)

I'll update the description to make that clear.

100% thank you Sarai, I was scratching my head over this for a while ;)

Change 954908 merged by jenkins-bot:

[wikidata/query-builder@master] Fix language selector dropdown menu position

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

This is looking good to me :)

Thanks so much