Page MenuHomePhabricator

Watchlist Expiry: fix text overflows for long page titles in watchstar pop-up
Open, Needs TriagePublic2 Estimated Story PointsBUG REPORT

Description

As a watchlist user, I want the name of page to properly text-wrap (rather than span past the pop-up width), so that I can easily read the name of the page that I am watching within the pop-up.

Background: This is an existing issue on production (you can reproduce by watching https://en.wikipedia.org/wiki/Pneumonoultramicroscopicsilicovolcanoconiosis. However, some pages seem to avoid this issue due to an automatic dashing, such as when you watch https://en.wikipedia.org/wiki/Taumatawhakatangi%C2%ADhangakoauauotamatea%C2%ADturipukakapikimaunga%C2%ADhoronukupokaiwhen%C2%ADuakitanatahu

Acceptance Criteria
  • Page names that exceed the width of the pop-up should have text-wrap onto the next line
  • Page names should not span past the width of the pop-up
  • The pop-up text should always be in the pop-up (i.e., it should not exceed the width of the pop-up)
What is the problem?

When the page title contains a long word(s), this can cause the text to overflow the popup container.

This example on beta (which is a genuine place in Wales):


Compare the same title on enwiki (without watchlist expiry enabled):


The title overflows on both, but with watchlist expiry enabled the rest of the text also overflows.

P.S. it does not seem to matter if the title is long but has spaces or hyphens which allow the title to be wrapped in the popup. Only if the title is, for example, a single long word with no breaks.

Steps to reproduce problem
  1. To go https://en.wikipedia.beta.wmflabs.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
  2. Click the watch star
Environment

Wiki(s): https://en.wikipedia.beta.wmflabs.org MediaWiki 1.36.0-alpha (0e9937c) 07:48, 31 August 2020

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 31 2020, 3:33 PM

It's because the "foo" and its talk page ... message is a <label>. If we change it to be plain text, then only the page title overflows, as is the case now with watchlist expiry turned off. It being a <label> doesn't make sense anyway, because there's no associated input. The "Watchlist time period:" text is the actual label for the input.

ifried updated the task description. (Show Details)Sep 1 2020, 8:11 PM
ifried updated the task description. (Show Details)Sep 3 2020, 10:41 PM
ifried updated the task description. (Show Details)
ifried renamed this task from Watchlist Expiry: text overflows watchstar popup when page title contains long words to Watchlist Expiry: fix text overflows for watchstar popup (long page titles).Sep 17 2020, 10:31 PM
ifried renamed this task from Watchlist Expiry: fix text overflows for watchstar popup (long page titles) to Watchlist Expiry: fix text overflows for long page titles in watchstar pop-up.
ifried updated the task description. (Show Details)Sep 17 2020, 10:55 PM
ifried updated the task description. (Show Details)
ARamirez_WMF set the point value for this task to 2.Sep 17 2020, 11:38 PM
ARamirez_WMF moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.