Page MenuHomePhabricator

Long username/language labels leads to horizontal scroll bar on meta on 1000-1200px threshold
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

Expected:
No horizontal scrollbar

The infected wikis:

  • metawiki
  • wikidata

Actual:
There is a horizontal scrollbar.

with_logo.png (768×1 px, 167 KB)

NOTE: If you can't replicate, try increasing the length of your username or the language button

Screen Shot 2021-11-30 at 11.49.54 AM.png (236×2 px, 78 KB)

Developer notes

We will add an ellipsis to the language button at lower resolutions where needed

Event Timeline

Aklapper changed the task status from Open to Stalled.Nov 10 2021, 9:25 AM

Hi @Dusan_Krehel, thanks for taking the time to report this! For future reference, please do include links, and explain what you expect to happen instead. (Both are part of the "bug report" template.) Thanks.

Screenshot from 2021-11-10 10-24-34.png (450×1 px, 66 KB)

Aklapper renamed this task from Wrong response web on meta to Search bar width leads to horizontal scroll bar on meta on 1024x768.Nov 10 2021, 12:05 PM
Aklapper changed the task status from Stalled to Open.
Aklapper added a project: Vector 2022.
Dusan_Krehel renamed this task from Search bar width leads to horizontal scroll bar on meta on 1024x768 to Search bar width leads to horizontal scroll bar on meta on 1000 to 1077 px width.Nov 12 2021, 2:02 PM
Dusan_Krehel updated the task description. (Show Details)

@alexhollender looks like 2 things might help here:

Introducing a max width / ellipsis on the language button just as we do with username

Screen Shot 2021-11-30 at 11.51.41 AM.png (406×2 px, 142 KB)

In practice this shouldn't kick in too often

  1. Given the existing design, we need to alter the threshold for where we collapse the user menu and language button. Is that okay? Currently it's set to width-breakpoint-desktop (1000px) but it should be increased to @width-breakpoint-desktop-wide (1200px).
Jdlrobson renamed this task from Search bar width leads to horizontal scroll bar on meta on 1000 to 1077 px width to Long username/language labels leads to horizontal scroll bar on meta on 1000-1200px threshold.Nov 30 2021, 7:56 PM

@Jdlrobson would it be possible at 1200px to switch to the 2-3 character code for the language, so English would become En, and Svenska would become Sv? If that's too complicated I like your solution of introducing a max-width / ellipsis on the language button.

In T295433#7557947, @alexhollender wrote:

@Jdlrobson would it be possible at 1200px to switch to the 2-3 character code for the language, so English would become En, and Svenska would become Sv? If that's too complicated I like your solution of introducing a max-width / ellipsis on the language button.

We can use the code but I'm not sure whether that makes sense from an i18n @Nikerabbit what do you think?

Using the language codes is quite a common practice, but I would not expect all users to understand what it means, so I wouldn't recommend it in this prominent position.

But I think this is a more of a design/usability question that @Pginer-WMF may have thoughts about rather than a technical question.

Pau before Alex left he told us he'd like you to weigh in on this one.

When there is not enough room for the full language name, I'm more inclined to the use of ellipsis rather than using ISO code. In both cases you have a shorter string that users have to reinterpret as their language, and using a string that is actually part of their language name I think makes it easier. Especially thinking on a non-technical audience and non-latin scripts (iso codes are always using latin script).

Jdlrobson updated the task description. (Show Details)

Thanks Pau!

Discussed in standup today and decided that this needs a more general solution. Assigning to @alexhollender for exploration.

If You don't like this error situation, so here is the way, how You can fix temporary, if You don't use a lower width as 720px.

Everytime none fix. Best solution for the user: Change the design template, none Vector 2022.

This should be fixed by the deployment of the new grid implemented in T303484.

This looks fixed to me (by T312241) but adding to QA in production for a final check.

I checked, it's online fixed now.