[ToC] add support for long section titles
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Apr 26 2022, 3:38 PM

Project Tags

Referenced Files

	F35130300: Screen Shot 2022-05-11 at 6.24.24 AM.png
	May 11 2022, 1:25 PM

	F35100027: Screen Shot 2022-05-03 at 6.45.27 PM.png
	May 4 2022, 1:46 AM

	F35100028: Screen Shot 2022-05-03 at 6.44.24 PM.png
	May 4 2022, 1:46 AM

	F35068718: Screen Shot 2022-04-26 at 11.45.15 AM.png
	Apr 26 2022, 3:46 PM

	F35068717: Screen Shot 2022-04-26 at 11.44.33 AM.png
	Apr 26 2022, 3:46 PM

	F35068710: Screen Shot 2022-04-26 at 11.34.13 AM.png
	Apr 26 2022, 3:39 PM

	F35068713: Screen Shot 2022-04-26 at 11.33.42 AM.png
	Apr 26 2022, 3:39 PM

	F35068707: Screen Shot 2022-04-26 at 11.33.42 AM.png
	Apr 26 2022, 3:38 PM

Subscribers

Description

Long section titles currently get clipped. Perhaps they should wrap, using word-break: break-all or a similar approach?

example: https://en.wikipedia.org/wiki/User:AHollender_(WMF)/sandbox/Long_section_title_test

before	after

QA Results - Beta

AC	Status	Details
1	✅	T306913#7901733

QA Results - Prod

AC	Status	Details
1	✅	T306913#7920825

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Add word-break CSS to TOC links	mediawiki/skins/Vector	master	+8 -4

Customize query in gerrit

Related Objects

Mentioned In: T306893: [ToC] Bottom fade issue
T304169: [Goal] Begin table of contents A/B test

Event Timeline

• alexhollender_WMF created this task.Apr 26 2022, 3:38 PM

• alexhollender_WMF updated the task description. (Show Details)

• alexhollender_WMF mentioned this in T304169: [Goal] Begin table of contents A/B test.

Jdlrobson mentioned this in T306893: [ToC] Bottom fade issue.Apr 26 2022, 3:44 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

• alexhollender_WMF updated the task description. (Show Details)Apr 26 2022, 3:46 PM

ovasileva triaged this task as Medium priority.Apr 26 2022, 3:47 PM

Break-all is never a good idea, as that would break words even in the presence of spaces or hyphens. We usually do this with word-break:break-word + word-wrap:break-word, to have all browsers covered, though I think overflow-wrap has also more browser-support now. The alternative is of course text-overflow:ellipsis.

LGoto moved this task from Incoming to Table of Contents on the Vector 2022 board.Apr 26 2022, 5:25 PM

LGoto set the point value for this task to 2.Apr 26 2022, 5:29 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

bwang moved this task from Ready for Development to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Apr 27 2022, 7:23 PM

Change 787056 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Add word-break CSS to TOC links

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

gerritbot added a project: Patch-For-Review.Apr 27 2022, 7:24 PM

Jdlrobson assigned this task to Edtadros.Apr 27 2022, 10:03 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

Change 787056 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add word-break CSS to TOC links