I just included a link to the initial design specifications in the task description. These outline the language selection flow in the context of the Mismatch Finder.



The specifications defining the visual and interactive features of the Language Selector component itself are available in this separate page in the file. Said specs are a synthesis of the original detailed documentation provided by the Language team, and the contents of the Design style guide.

Please check the questions shared in this comment in the parallel task T328148: LangSelector added to Query Builder. These might have an impact on the original specs.

@Sarai-WMDE Is this task ready to be picked up? It just dawned on us in task breakdown that we might not have tasks to pick up yet for this sprint, can this be pulled in if need be?

Hello! Yes. This is ready to be picked up if needed.

https://github.com/wmde/wikidata-mismatch-finder/pull/636

@Sarai-WMDE it's difficult to tell from the figma if the mobile version of the auth-widget has both items (username and logout button) aligned to the left or if they are to be aligned to opposite ends of the container in small screens. I implemented it according to the latter, which means with my (shorter) username it appears like this:

If the former is preferred it requires getting rid of the justify-content rule in the media query of the .auth-widget class in AuthWidget.vue. (specifying as I probably won't be around to change it myself.)

In T328149#9030965, @noarave wrote:

@Sarai-WMDE it's difficult to tell from the figma if the mobile version of the auth-widget has both items (username and logout button) aligned to the left or if they are to be aligned to opposite ends of the container in small screens. I implemented it according to the latter, which means with my (shorter) username it appears like this:

If the former is preferred it requires getting rid of the justify-content rule in the media query of the .auth-widget class in AuthWidget.vue. (specifying as I probably won't be around to change it myself.)

Since this does not relate to the language selector per se, I'd say this is out of scope for this task. If indeed the auth widget is not correctly aligned it should be addressed in it's own bug task.

Sorry for only reading this now and not making the alignment of the elements clearer. All elements should be aligned left (or right, depending on language orientation).

So yes, looks like this will need fixing.

On the other hand, it seems that the elements are moving under the logo based on a breakpoint, instead of following the same behavior implemented in the Query builder. Which was based on maintaining a minimum spacing between the logo and the LanguageSelector button:

We also should make sure to prevent the header links from wrapping:

Apologies, I did not have time to address these until now, will try to make corrections today or tomorrow

Hey @Arian_Bozorg. There are some fixes still required, which are related to the placement of the header elements and the language menu:

Should these be documented in a separate task, or should we reopen this ticket?

go ahead reopen it, I will submit a PR in a few minutes

The wrapping issues were resolved and merged, during work on this it was discovered that there is a bug with the options menu after wrapping and before the mobile breakpoint. Since there wasn't an obvious, easy, fix the bug is documented in T343563: [BUG][MismatchFinder] LanguageSelector options menu is not visible in some tablet sizes to be prioritized in the coming weeks.