Page MenuHomePhabricator

Watchlist doesn't word wrap for very long words/links
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • skin=vector
  • Create a talk page with a section with a very long name
  • Watchlist it
  • Use an alt account to make an edit to that section
  • Visit your watchlist on the first account

What happens?:

  • Section link is too long. Doesn't wrap. Creates a horizontal scroll bar. Overflows into the right margin of the page.

image.png (186×2 px, 44 KB)

What should have happened instead?:

  • Long section name should wrap. No horizontal scroll bar. No visible right margin.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

@Tgr Works for me at your history link. But did you try watchlist?

If you cant reproduce on watchlist, maybe one of the watchlist settings is an important step to reproduce and I forgot it

I don't think I can display an old change on my watchlist. Recent changes are a lot closer to watchlists in terms of implementation though so I should have tested there instead; and indeed I can reproduce it there. Affects at least Vector 2022 and Monobook too.

Both the page history and RC/watchlist have span.comment { overflow-wrap: break-word; } (coming from mediawiki.interface.helpers.styles) and the DOM structure within that span is identical. RC works fine with the "Group results by page" option disabled. So this must somehow be related to being inside a table, which changes many layout rules.

Not sure what to do about that. Adding word-break: break-all; works but I don't know if it will do too much.

The deprecated value word-break: break-word; also works. MDN claims "While word-break: break-word is deprecated, it has the same effect, when specified, as word-break: normal and overflow-wrap: anywhere — regardless of the actual value of the overflow-wrap property." but that's apparently not quite true for tables (on Chrome at least).