Page MenuHomePhabricator

CX2: Long category names overflow oo-ui-labelElement-label
Closed, ResolvedPublic

Description

In cx2-testing for the article 'First Geneva Convention' (translating from English) - the category names overflow the label elment placeholder:

In production (wmf.27) Category section has a different design allowing to wrap long category names:

Details

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 3 2018, 11:42 PM

This should probably be resolved in OOUI. By looking at the code, one can observe that .oo-ui-tagItemWidget is preventing wrapping and its only child, .oo-ui-labelElement-label, is trying to add ellipsis, but that fails.

Here is comparison of current state and two different options (ellipsis and wrapping):

OverflowEllipsisWrapping

Wrapping probably isn't an option for OOUI solution, but I'm exploring ways to be able to see whole category name. I think ellipsis should be applied and let T188618 be an option to check exceptionally long category names.

Wrapping probably isn't an option for OOUI solution, but I'm exploring ways to be able to see whole category name. I think ellipsis should be applied and let T188618 be an option to check exceptionally long category names.

This approach makes sense to me. There should be enough room for most cases and the preview card (T188618) will be useful with the rest. For additional help to desktop users, we can use the standard tooltips to show the full name on hover.

Pginer-WMF triaged this task as Low priority.Apr 4 2018, 9:49 AM
Pginer-WMF renamed this task from Long category names overflow oo-ui-labelElement-label to CX2: Long category names overflow oo-ui-labelElement-label.Apr 4 2018, 10:17 AM

Change 428693 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[oojs/ui@master] TagItemWidget: Make applying cutoff and ellipsis actually work

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

Change 428693 merged by jenkins-bot:
[oojs/ui@master] TagItemWidget: Make applying cutoff and ellipsis actually work

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

Petar.petkovic closed this task as Resolved.Apr 24 2018, 7:44 PM
Petar.petkovic assigned this task to matmarex.
Petar.petkovic moved this task from QA to Done on the Language-2018-Apr-June board.

Since @Etonkovidova would need to wait for next release of OOUI to do QA, I have checked the article from the description and captured following screenshot:


Thanks @matmarex for dealing with this.

Volker_E moved this task from Backlog to OOUI-0.26.5 on the OOUI board.Apr 24 2018, 9:19 PM
Volker_E edited projects, added OOUI (OOUI-0.26.5); removed OOUI.