Page MenuHomePhabricator

Regression: Mark all as read button in notifications overlay larger than header
Closed, ResolvedPublic

Description

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:Notifications#/notifications

On mobile:

Screen Shot 2019-03-19 at 12.40.35 PM.png (456×379 px, 33 KB)

On desktop:

Screen Shot 2019-03-19 at 12.41.14 PM.png (695×1 px, 52 KB)

Compare with production:

Screen Shot 2019-03-19 at 12.41.17 PM.png (701×1 px, 44 KB)

Expected:

  • Button should align right on desktop
  • Button should fit into header

QA steps

QA Results

StatusDetails
✅ PassedT218731#5110101

Event Timeline

Change 497597 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Fix positioning and size of mark all as read button in NotificationOverlay

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

Change 497597 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Fix positioning and size of mark all as read button in NotificationOverlay

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

Edtadros added a subscriber: Edtadros.

Test Result

Status: Need More Info
OS: macOS Mojave
Browser: Chrome DevTools Device Emulator (iPhone X)

Test Artifact(s):

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:Notifications#/notifications on desktop and confirm it matches (or improves the display) on production.

Screen Shot 2019-03-19 at 10.51.57 PM.png (2×1 px, 669 KB)

Screen Shot 2019-03-19 at 10.52.07 PM.png (2×1 px, 621 KB)

Resize browser to check mobile looks the same as well

Screen Shot 2019-03-19 at 10.53.01 PM.png (2×1 px, 660 KB)

Screen Shot 2019-03-19 at 10.53.51 PM.png (2×1 px, 641 KB)

@Jdlrobson I feel like this should fail. In Beta the button appears to bleed into the right edge of the screen. The expectation is that it is right aligned. Objectively this could satisfy the requirement. However, subjectively it doesn't look right. The buttons function correctly.

ovasileva triaged this task as Medium priority.Mar 20 2019, 9:43 AM
Jdlrobson added a subscriber: alexhollender_WMF.

In Beta the button appears to bleed into the right edge of the screen. The expectation is that it is right aligned.

Yeh your screenshot definitely looks better but right now i'm seeing bleeding on enwiki too.

That said it looks even better without a border or background:

Screen Shot 2019-03-21 at 8.12.49 AM.png (564×402 px, 80 KB)

Pulling in @alexhollender for his thoughts around this!

Great catch @Jdlrobson. I'd like to keep the button styling as-is. Let's add 8px of padding/margin between the button and the edge of the overlay (there seems to be a number of ways to do this via CSS).

currentfixed
mobile
IMG_0157.PNG (1×750 px, 131 KB)
IMG_0159.PNG (1×750 px, 132 KB)
desktop
Screen Shot 2019-03-27 at 1.29.07 PM.png (921×1 px, 328 KB)
Screen Shot 2019-03-27 at 1.29.48 PM.png (921×1 px, 330 KB)

Great catch @Jdlrobson.

@Edtadros caught this not me :P
We'll need a specific rule for the notification overlay that overrides the default button rule. If someone can pick this task up while I'm out that would be great.

Change 500534 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] OOUI header actions should have right margin

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

Change 500534 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] OOUI header actions should have right margin

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

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP, iPhoneX (Chrome devtools emulator)

Test Artifact(s):

Desktop:

Screen Shot 2019-04-14 at 3.43.55 PM.png (2×2 px, 945 KB)

Mobile:

T218731-1.png (2×1 px, 236 KB)

ovasileva updated the task description. (Show Details)

All done here