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:
Description
Description
Details
Details
Related Changes in Gerrit:
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| TagItemWidget: Make applying cutoff and ellipsis actually work | oojs/ui | master | +11 -0 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T188605 CX2: Category support | |||
| Resolved | matmarex | T191370 CX2: Long category names overflow oo-ui-labelElement-label |
Event Timeline
Comment Actions
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):
| Overflow | Ellipsis | Wrapping |
|---|---|---|
 |  |  |
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.
Comment Actions
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.
Comment Actions
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
Comment Actions
Change 428693 merged by jenkins-bot:
[oojs/ui@master] TagItemWidget: Make applying cutoff and ellipsis actually work
Comment Actions
Thanks @matmarex for dealing with this.
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.