Page MenuHomePhabricator

[testwiki - wmf.17] New user links desktop: long yellow talk message banner pushes user links off screen
Closed, ResolvedPublic2 Estimated Story Points

Description

On languages that have longer labels, the yellow talk message banner will take more space than usual.

  1. On testwikitrigger the yellow talk message banner ( leave a comment on your personal talk page).
  2. Change UI language to German (with uselang=de). Starting with a screen width :1337px, the user link icon will be displayed off screen.

Screen Shot 2021-08-03 at 1.28.47 PM.png (1×2 px, 728 KB)

At the 1319px, the yellow talk message banner will be displayed on the next line.

Screen Shot 2021-08-03 at 1.42.11 PM.png (1×2 px, 590 KB)

Acceptance Criteria

  • Add a max-width to the message banner that is a computed width of 270px (should probably be in em units)
  • Also make the message show an ellipsis when the message exceeds the max-width

QA Steps

Screen Shot 2021-08-06 at 3.17.48 PM.png (1×2 px, 1 MB)

QA Results - Beta

ACStatusDetails
1T287996#7279062

QA Results - Prod

ACStatusDetails
1T287996#7279070

Event Timeline

Not sure why I was copied here, but if you want my input, I think the message should be made shorter, like it used to be.

Options are shortening the message, or adding a max width.

nray removed the point value for this task.
nray updated the task description. (Show Details)

seems like we'd need a max-width of 270px to avoid the issue

Jdlrobson set the point value for this task to 2.Aug 5 2021, 5:21 PM

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

[mediawiki/skins/Vector@master] Add max-width and text-overflow: ellipsis to Echo alert with modern user links

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

Change 710583 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add max-width and text-overflow: ellipsis to Echo alert with modern user links

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

cjming updated the task description. (Show Details)
cjming moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming added a subscriber: bwang.

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

Test Artifact(s):

QA Steps

Navigate to a page on Beta Cluster with the German query parameter uselang=de i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?uselang=de
Create a new talk message for your account (instructions in T285442)
Resize the browser window and check that all icons remain in view between 1319-1337 px
✅ AC1: Verify icons in task description persist

Screen Recording 2021-08-12 at 7.59.26 AM.mov.gif (836×1 px, 2 MB)

Status: ✅ PASS
Environment: cawiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to a page with the German query parameter uselang=de i.e. https://ca.wikipedia.org/wiki/Albert_Einstein?uselang=de
Create a new talk message for your account (instructions in T285442)
Resize the browser window and check that all icons remain in view between 1319-1337 px
✅ AC1: Verify icons in task description persist

Screen Recording 2021-08-12 at 8.06.21 AM.mov.gif (836×1 px, 931 KB)

Edtadros updated the task description. (Show Details)
Edtadros subscribed.