Page MenuHomePhabricator

Different size boxes for bundled notifications
Closed, ResolvedPublic

Description

Found when checking T140523: In mobile view, bundled notifications extend outside the screen limit


A smaller difference.

The example of the title to produce such type of misalignment is

[[User:ETonkovidova]] on Feb 03

Surprisingly , titles like
[[User:Lorem ipsum dolor sit amet consectetur adipiscing elit Morbi vitae euismod]] is a really long user name are displayed fine.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 10 2016, 11:43 PM
Danny_B renamed this task from [mobile] Different size boxes for bundled notifications to Different size boxes for bundled notifications .Aug 10 2016, 11:55 PM
Danny_B added a project: Mobile.
Catrope added a subscriber: Catrope.

Clarification: this is about the different widths. The different heights are expected due to wrapping.

Seems to happen when the username in the message is longer, and so the wrapping is ... well, warped.

I am not sure how to fix this. If we make the font smaller or try to accommodate the width of the username at a certain point, we will still run into issues with longer usernames.
We could truncate the username after certain amount of characters, which will work for even longer usernames...

I take this back, the behavior is not happening in Chrome mobile emulator and in Android:

Chrome mobile:

Chrome on Android:

Firefox on Android:

I checked on an iOS device and I can't reproduce it either there. This is either not about the length of the username/topic name, or it might be about a specific iOS version...?

Etonkovidova added a comment.EditedAug 18 2016, 9:45 PM

@Mooeypoo There is a discrepancy in how the issue is displayed on the real device (iPhone 6s, iOS 9.3.2) and Chrome mobile emulator. However, it's still reproducible. The key points for reproducing

  • the topic title should include a link. The below examples include

[[User:ETonkovidova]] on Feb 03 new topic and [[User:FictitiousUserWithLongName]] on Feb 03 new topic


not in cross-wiki bundle

  • more noticeable in cross-wiki bundles
  • the issue is only partially displayed by Chrome emulator, but it's there (on the screenshot is cross-wiki bundle with the first message with the topic title [[User:FictitiousUserWithLongName]] on Feb 03 new topic

Change 307663 had a related patch set uploaded (by Mooeypoo):
Add the best CSS rule to notifications: word-break: break-word;

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

Change 307663 merged by jenkins-bot:
Add the best CSS rule to notifications: word-break: break-word;

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

The issue is fixed - checked in betalabs:

In a foreign wiki

jmatazzoni closed this task as Resolved.Oct 11 2016, 12:22 AM