Page MenuHomePhabricator

Discuss solution for clipped placeholder text in ULS when screen width decreased
Closed, ResolvedPublic3 Estimated Story Points

Description

Description

Currently when the ULS is displaying the list in a single column the placeholder text is clipped (view on patchdemo) at lower resolutions (decrease browser width to see this in action):

image.png (488×496 px, 151 KB)

This is also a problem in production for the compact languages link feature.

Given that the length of the string "Search for a language" varies per language, what might be a reasonable solution here? Min-width for the menu?

languagestringscreenshot
deNach einer Sprache suchen
Screen Shot 2021-03-02 at 2.24.05 PM.png (496×533 px, 165 KB)
frRechercher une langue
Screen Shot 2021-03-02 at 2.24.38 PM.png (490×483 px, 161 KB)

QA Results - Beta

ACStatusDetails
1T276255#6973091

Event Timeline

Jdlrobson added a subscriber: santhosh.

cc @santhosh - any ideas how to fix this one? Would T276248 fix this?
@ovasileva let's add this to our next sync with the language team.

ovasileva triaged this task as Medium priority.Mar 3 2021, 8:48 AM
Jdlrobson renamed this task from Discuss solution for clipped placeholder text in ULS to Discuss solution for clipped placeholder text in ULS when screen width decreased.Mar 3 2021, 6:46 PM
Jdlrobson updated the task description. (Show Details)
ovasileva raised the priority of this task from Medium to High.Mar 9 2021, 2:50 PM

As well as min-width, something else we can do is add ellipses to the input placeholder:

::placeholder{
    text-overflow:ellipsis;
}

I am not sure about using ellipsis, since it actually makes less text visible. Once T276248: Position language menu below language button is fixed there is more space available horizontally. Currently the narrow view gets too narrow at times, so it can definitely use more width in my opinion.

Another option is to make the placeholder shorter. https://translatewiki.net/w/i.php?title=Special:Translations&message=Wikimedia%3AUls-uls-search-placeholder is the list of current translations.

PR to review at https://github.com/wikimedia/jquery.uls/pull/383 but I created https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UniversalLanguageSelector/+/672743 to make testing easier.

After removing explicit percentage based width statements, the menu widths appear more natural to me. For common case now the narrow and medium width look the same, since the input & display setting buttons define make the menu wider. They only wrap if there isn't enough horizontal space.

ovasileva set the point value for this task to 3.Mar 16 2021, 5:34 PM

We need to do a release of jquery.uls inside ULS extension.

We need to do a release of jquery.uls inside ULS extension.

That has been done.

Edtadros added a subscriber: Edtadros.

@Jdlrobson, can you clarify the acceptance criteria please If I shrink the width enough, the "Search for language" gets masked by what would be the clear search button if I put any text in the field.

Screen Shot 2021-03-23 at 9.30.31 AM.png (47×227 px, 3 KB)

@Edtadros is this on patchdemo or beta cluster? If you need to use patchdemo to QA you can use https://patchdemo.wmflabs.org/wikis/8e7e015a1d/wiki/Main_Page instead.

@Nikerabbit - I am noticing some weird behaviour on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein -ULS is loading at bottom of page. Any ideas what's going on there?

Screen Shot 2021-03-23 at 12.01.56 PM.png (1×2 px, 230 KB)

Change 674541 had a related patch set uploaded (by Nikerabbit; owner: Nikerabbit):
[mediawiki/extensions/UniversalLanguageSelector@master] Fix ULS dialog positioning in some cases

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

My patch should fix it, though I cannot verify locally. Does the fix (if confirmed) need backporting?

Change 674541 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Fix ULS dialog positioning in some cases

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

I don't think it needs backporting, since the language button is not deployed anywhere yet but I can confirm it's now working on beta cluster :)

@Edtadros is this on patchdemo or beta cluster? If you need to use patchdemo to QA you can use https://patchdemo.wmflabs.org/wikis/8e7e015a1d/wiki/Main_Page instead.

@Jdlrobson That image was in Beta. I haven't found that truncation in Patch Demo. I'm not sure what functionality I should be validating here. Here's what I see in Patch demo:

en
Screen Shot 2021-03-28 at 5.16.15 PM.png (463×477 px, 70 KB)
de
Screen Shot 2021-03-28 at 5.17.54 PM.png (463×461 px, 42 KB)
fr
Screen Shot 2021-03-28 at 5.18.31 PM.png (453×461 px, 43 KB)

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Verify "Search for language" is not truncated

Screen Recording 2021-04-05 at 10.40.55 AM.mov.gif (748×1 px, 298 KB)

Screen Recording 2021-04-05 at 10.44.48 AM.mov.gif (748×1 px, 350 KB)

Will QA once new language switcher is in production