Page MenuHomePhabricator

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

Description

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

beforeafter
Screen Shot 2022-04-26 at 11.44.33 AM.png (386×418 px, 35 KB)
Screen Shot 2022-04-26 at 11.45.15 AM.png (404×577 px, 87 KB)

QA Results - Beta

ACStatusDetails
1T306913#7901733

QA Results - Prod

ACStatusDetails
1T306913#7920825

Event Timeline

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.

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

Change 787056 merged by jenkins-bot:

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

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Long section titles should wrap in TOC.

Screen Shot 2022-05-03 at 6.45.27 PM.png (1×634 px, 236 KB)

Screen Shot 2022-05-03 at 6.44.24 PM.png (1×637 px, 288 KB)

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Long section titles should wrap in TOC.

Screen Shot 2022-05-11 at 6.24.24 AM.png (756×652 px, 160 KB)