Consider length of Collection names on different views
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• PWaigi-WMF
	Nov 25 2024, 9:02 AM

Description

We need to explore how long Collection names can be displayed well in different views; based on the example below of Wikiproject Women's Health/Vital articles.

a) Suggestions view

Screenshot 2024-11-22 at 23.09.14.png (1×719 px, 293 KB)

b) Adjust the Suggestions view

Screenshot 2024-11-22 at 23.07.24.png (1×707 px, 207 KB)

UX improvements for collection label formatting

Scenario 1: Simple collection labels

Examples:

Vital articles
Art+Feminism
WikiProject Women's Health

Rule:

Truncate when exceeds container width

Example: "WikiProject Women's Health" → "WikiProject Wom..."

Scenario 2: Collection labels with path

Examples:

WikiProject Women's Health/Vital Articles
Art+Feminism/2024 Campaign
CEE Spring 2024/Structure/Russian Federation

Progressive truncation suggestion:

Split at last "/"
When exceeds container width:
- Left part gets ellipsis: "CEE Spring.../Russian Federation"
- In space-constrained UIs (like suggestions view): Ultra-short version → "Wiki.../Russian..."

Derived Requirement

Ensure that collection names are displayed appropriately across different views. Collection names should be truncated when they exceed the container width, following these rules:

For simple collection labels (e.g., "Vital articles"), truncate at the container width (e.g., "WikiProject Women's Health" → "WikiProject Wom...").
For collection labels with paths (e.g., "WikiProject Women's Health/Vital Articles"), split at the last "/" and apply progressive truncation. In space-constrained UIs, ultra-short versions should be displayed (e.g., "Wiki.../Russian...").

Test Steps

Test Case 1: Ensure Proper Truncation of Collection Labels in Different Views

Navigate to the Suggestions view and identify collection labels.
Verify that simple collection labels are truncated when they exceed the container width (e.g., "WikiProject Women's Health" → "WikiProject Wom...").
Check collection labels with paths and ensure truncation follows the progressive approach. For example, "CEE Spring 2024/Structure/Russian Federation" should appear as "CEE Spring.../Russian Federation."
In space-constrained areas, confirm that ultra-short versions are displayed (e.g., "Wiki.../Russian...").
✅❓❌⬜ AC1: Confirm that collection names are truncated or split according to the specified rules based on container width and view type.

QA Results - Test Wiki

AC	Status	Details
1	✅	T380702#10784765
2	✅	T380702#10784765

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
CX3 Build 1.0.0+20250414	mediawiki/extensions/ContentTranslation	master	+2 K -3 K
Remove unnecessary max-width constraint in CustomInfoChip	mediawiki/extensions/ContentTranslation	master	+0 -1
CX3 Build 0.2.0+20250303	mediawiki/extensions/ContentTranslation	master	+5 K -5 K
CustomInfoChip: increase specificity	mediawiki/extensions/ContentTranslation	master	+23 -21
Handle the string formatting of long collection names	mediawiki/extensions/ContentTranslation	master	+82 -15
Handle the string formatting of long collection names	mediawiki/extensions/ContentTranslation	master	+209 -4
CX3 Build 0.2.0+20241218	mediawiki/extensions/ContentTranslation	wmf/1.44.0-wmf.8	+5 -5
CX3 Build 0.2.0+20241218	mediawiki/extensions/ContentTranslation	master	+5 -5
CX3 Build 0.2.0+20241217	mediawiki/extensions/ContentTranslation	master	+5 -5
Updated initial handling of long collection names	mediawiki/extensions/ContentTranslation	master	+3 -0
Initial handling of long collection names	mediawiki/extensions/ContentTranslation	master	+3 -0

Related Objects
Search...

View Standalone Graph

This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Status	Assigned	Task
		· · ·
Resolved	ngkountas	T368718 Community-defined Translation Collections: Single selection mode UI
Resolved	eamedina	T380702 Consider length of Collection names on different views
		· · ·

Event Timeline

• PWaigi-WMF created this task.Nov 25 2024, 9:02 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 25 2024, 9:02 AM

• PWaigi-WMF added a parent task: T368718: Community-defined Translation Collections: Single selection mode UI.Nov 25 2024, 9:03 AM

• PWaigi-WMF renamed this task from Consider length of Collection name on different views to Consider length of Collection names on different views.Nov 25 2024, 9:09 AM

• PWaigi-WMF updated the task description. (Show Details)

In general we may want to adjust the styling of the collection tags for the label to be cropped with ellipses to prevent them exceeding the available width. That is, filter chips should take no more than one line and avoid making contents to overflow to the next line (e.g. some codepen examples illustrate the use of CSS to support this).

A special consideration we may want ot take into account is for cases where the collection is defined as a sub-page and gets the name from it.

Dealing with page paths

For cases where the collections are taking the name of the page, we can find long collection names consisting of pages and sub-pages such as "Wikiproject Women's Health/Vital articles", where cropping it depending on the space available could result in the last part of teh path to be not present at all (e.g., "Wikiproject Women's Heal..."). In that case, if there were three collections defined as sub-pages of "Wikiproject Women's Health" such as "Vital articles", "Level 1", and "Level 2". All three could get cropped as "Wikiproject Women's Heal...".

In order to consider this, we can think of the page name as two different segments: the path and the final sub-page separated by the last "/". The path can be cropped with elipsis after a certain length, and leave the rest of the space for the final sub-page name (which can be also cropped if it were longer than the available space. This would lead to the following examples:

"Wikiproject Wome.../Vital articles"
"Wikiproject Wome.../List of the most commo..."

That seems an improvement over having both collections labeleld the same as "Wikiproject Women's Heal..." because the differentiating part is at the very end.

SBisson mentioned this in T380838: recommendation API server fails to fill cache .Nov 26 2024, 7:16 PM

• PWaigi-WMF moved this task from Backlog to Prioritized on the LPL Hypothesis board.Nov 27 2024, 9:55 AM

SGautam_WMF updated the task description. (Show Details)Nov 28 2024, 8:05 AM

SGautam_WMF updated the task description. (Show Details)Nov 28 2024, 8:13 AM

• PWaigi-WMF triaged this task as Medium priority.Dec 2 2024, 2:11 PM

• PWaigi-WMF mentioned this in T379273: Community-defined Translation Collections: Collection View.Dec 3 2024, 7:47 AM

eamedina claimed this task.Dec 10 2024, 2:04 AM

eamedina moved this task from Prioritized to In-progress on the LPL Hypothesis board.

Change #1101932 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Handle the string formatting of long collection names

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

gerritbot added a project: Patch-For-Review.Dec 10 2024, 7:53 PM

eamedina moved this task from In-progress to Needs Code Review on the LPL Hypothesis board.Dec 10 2024, 7:56 PM

Change #1105040 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Initial handling of long collection names

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

Change #1105040 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Initial handling of long collection names

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

Change #1105049 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241217

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

ReleaseTaggerBot added a project: MW-1.44-notes (1.44.0-wmf.12; 2025-01-14).Dec 17 2024, 7:00 PM

Change #1105057 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Initial handling of long collection names

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

Change #1105057 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Updated initial handling of long collection names

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

Change #1105049 abandoned by Sbisson:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241217

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

Change #1105327 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241218

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

Change #1105327 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241218

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

Change #1105336 had a related patch set uploaded (by KartikMistry; author: Sbisson):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.8] CX3 Build 0.2.0+20241218

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

Change #1105336 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.8] CX3 Build 0.2.0+20241218

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.8; 2024-12-17); removed MW-1.44-notes (1.44.0-wmf.12; 2025-01-14).Dec 18 2024, 3:00 PM

Mentioned in SAL (#wikimedia-operations) [2024-12-18T15:06:13Z] <kartik@deploy2002> Started scap sync-world: Backport for [[gerrit:1105336|CX3 Build 0.2.0+20241218 (T380702)]]

Change #1105411 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Handle the string formatting of long collection names

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

Change #1101932 abandoned by Eamedina:

[mediawiki/extensions/ContentTranslation@master] Handle the string formatting of long collection names

Reason:

Different approach Ia232b6e79991cea6d841492260e7a36fbd9dcd8a

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

• PWaigi-WMF mentioned this in T380388: Add an initial set of collections by tagging some existing community pages.Jan 17 2025, 9:05 PM

Note:
Once the task is done, let's test with full names:
<page-collection name="Sustainability"></page-collection> = should now show Wiki99/sustainability
<page-collection name="Essential Articles"></page-collection> = should now show List of articles every Wikipedia should have
<page-collection name="Climate"> </page-collection> should now show Wikimedians for Sustainable Development/Climate translation project
<page-collection name="Women's Health"> </page-collection> should now show Wikiproject Women's Health/Vital articles

Change #1105411 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Handle the string formatting of long collection names

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.13; 2025-01-21); removed MW-1.44-notes (1.44.0-wmf.8; 2024-12-17).Jan 20 2025, 6:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jan 20 2025, 6:31 PM

SBisson moved this task from Needs Code Review to Pending deployment on the LPL Hypothesis board.Jan 22 2025, 9:10 PM

SBisson moved this task from Pending deployment to Needs QA on the LPL Hypothesis board.Jan 29 2025, 5:36 PM

GMikesell-WMF updated Other Assignee, added: GMikesell-WMF.Feb 7 2025, 7:55 PM

GMikesell-WMF updated the task description. (Show Details)

@eamedina Just a quick question regarding the 2nd slash. It does work but since the extra words are on the 2nd slash, shouldn't it show all the first word like "Wiki99/foodfoodfoodfoodfoodfoodfood...", besides "W.../foodfoodfoodfoodfoodfoodfoodfood..." ? Let me know what you think.

*UPDATE*- Good to go from T380702#10545707

Test Result - TestWiki

Status: ✅ PASS
Environment: TestWiki
OS: macOS Sonoma 15.3
Browser: Chrome 132
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=es&to=en&filter-type=collections&filter-id=Sustainability
https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=es&to=en&filter-type=collections&filter-id=Wiki99/food

Test Steps

Test Case 1: Ensure Proper Truncation of Collection Labels in Different Views

Navigate to the Suggestions view and identify collection labels.
Verify that simple collection labels are truncated when they exceed the container width (e.g., "WikiProject Women's Health" → "WikiProject Wom...").
Check collection labels with paths and ensure truncation follows the progressive approach. For example, "CEE Spring 2024/Structure/Russian Federation" should appear as "CEE Spring.../Russian Federation."
In space-constrained areas, confirm that ultra-short versions are displayed (e.g., "Wiki.../Russian...").
✅AC1: Confirm that collection names are truncated or split according to the specified rules based on container width and view type.

Adjust Suggestions

✅ first slash	❓ 2nd slash	✅ No slash
		✅

Top Suggestions

✅ first slash	❓ 2nd slash	No slash
		✅

New Pages/Section Suggestions

✅ first slash	❓2nd slash	No slash
		✅

GMikesell-WMF updated the task description. (Show Details)Feb 11 2025, 11:38 PM

Hey @GMikesell-WMF, thanks for QAing. I think the string "W.../foodfoodfoodfoodfoodfoodfoodfood..." is fine in this case as I believe we can assume the second/last part is more definitive in identifying the collection (for example: "Wiki99/food" and "Wiki99/chemistry")

GMikesell-WMF updated Other Assignee, removed: GMikesell-WMF.Feb 12 2025, 8:30 PM

GMikesell-WMF updated the task description. (Show Details)

GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.

ngkountas moved this task from Design Signoff to Prioritized on the LPL Hypothesis board.Feb 27 2025, 1:32 PM

eamedina moved this task from Prioritized to In-progress on the LPL Hypothesis board.Feb 27 2025, 2:14 PM

Change #1123406 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] CustomInfoChip: increase specificity

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

gerritbot added a project: Patch-For-Review.Feb 27 2025, 4:18 PM

Change #1123406 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CustomInfoChip: increase specificity

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.19; 2025-03-04); removed MW-1.44-notes (1.44.0-wmf.13; 2025-01-21).Feb 27 2025, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.Feb 27 2025, 5:31 PM

eamedina moved this task from In-progress to Needs Code Review on the LPL Hypothesis board.Feb 27 2025, 6:32 PM

eamedina moved this task from Needs Code Review to Pending deployment on the LPL Hypothesis board.

Change #1124141 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20250303

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

gerritbot added a project: Patch-For-Review.Mar 3 2025, 4:11 PM

Change #1124141 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20250303

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

Maintenance_bot removed a project: Patch-For-Review.Mar 3 2025, 6:34 PM

ngkountas moved this task from Pending deployment to Needs QA on the LPL Hypothesis board.Mar 7 2025, 10:19 AM

@eamedina Confirmed that collection names are truncated or split according to the specified rules based on container width and view type on mobile as seen in the screenshots below. I will move this to sign-off. Thanks for all your work!

Test Result - TestWiki

Status: ✅ PASS
Environment: TestWiki
OS: macOS Sonoma 15.3
Browser: Chrome 132
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 2: Ensure Proper Truncation of Collection Labels in Different Views for Mobile

Navigate to the Suggestions view and identify collection labels.
Verify that simple collection labels are truncated when they exceed the container width (e.g., "WikiProject Women's Health" → "WikiProject Wom...").
Check collection labels with paths and ensure truncation follows the progressive approach. For example, "CEE Spring 2024/Structure/Russian Federation" should appear as "CEE Spring.../Russian Federation."
In space-constrained areas, confirm that ultra-short versions are displayed (e.g., "Wiki.../Russian...").
✅AC2: Confirm that collection names are truncated or split according to the specified rules based on container width and view type.

Mobile
Adjust Suggestions

✅ first slash	✅ 2nd slash	✅ No slash

Top Suggestions

✅ first slash	✅ 2nd slash	No slash

New Pages/Section Suggestions

✅ first slash	❓2nd slash	No slash

GMikesell-WMF updated the task description. (Show Details)Mar 10 2025, 4:59 PM

GMikesell-WMF moved this task from Needs QA to Design Signoff on the LPL Hypothesis board.

Change #1136438 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Remove unnecessary max-width constraint in CustomInfoChip

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

gerritbot added a project: Patch-For-Review.Apr 14 2025, 7:30 PM

Change #1136438 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Remove unnecessary max-width constraint in CustomInfoChip

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

Change #1136452 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250414

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

ReleaseTaggerBot edited projects, added MW-1.44-notes (1.44.0-wmf.25; 2025-04-15); removed MW-1.44-notes (1.44.0-wmf.19; 2025-03-04).Apr 14 2025, 9:00 PM

Change #1136452 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 1.0.0+20250414

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

Maintenance_bot removed a project: Patch-For-Review.Apr 15 2025, 12:31 AM

Nikerabbit moved this task from Design Signoff to Pending deployment on the LPL Hypothesis board.Apr 15 2025, 6:35 AM

SBisson moved this task from Pending deployment to Needs QA on the LPL Hypothesis board.Apr 17 2025, 6:56 PM

@eamedina Retest with the latest update of Remove unnecessary max-width constraint in CustomInfoChip. I will move this to sign-off. Thanks for all your work!

Test Result - Test Wiki

Status: ✅ PASS
Environment: TestWiki
OS: macOS Sonoma 15.4.1
Browser: Chrome 135
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 2: Ensure Proper Truncation of Collection Labels in Different Views for Mobile

Navigate to the Suggestions view and identify collection labels.
Verify that simple collection labels are truncated when they exceed the container width (e.g., "WikiProject Women's Health" → "WikiProject Wom...").
Check collection labels with paths and ensure truncation follows the progressive approach. For example, "CEE Spring 2024/Structure/Russian Federation" should appear as "CEE Spring.../Russian Federation."
In space-constrained areas, confirm that ultra-short versions are displayed (e.g., "Wiki.../Russian...").
✅AC2: Confirm that collection names are truncated or split according to the specified rules based on container width and view type.

Mobile
Adjust Suggestions