Maniphest T219320

[Bug] Big empty gutter shown in notifications panel
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• Niedzielski
	Mar 26 2019, 8:14 PM

Description

Steps to reproduce

Expected results

Screen space is used effectively

Actual results

A large white gutter is shown to the right of notifications

Screenshot from 2019-03-26 14-10-21.png (2×3 px, 197 KB)

Environments observed

Browser version: Chromium v73.0.3683.75
OS version: Ubuntu v18.10
Device model: Desktop
Device language: English

Check any additional observations

Observed on the beta cluster wiki
Observed on a production wiki
Observed on Vector desktop skin
Observed on MinervaNeue responsive skin
Observed while logged in
Observed while not logged in (anonymous)

QA Results

Status	Details
✅ Passed	T219320#5166481

Details

	Subject	Repo	Branch	Lines +/-
	🐛 Notification overlay should take up full width on larger screens	mediawiki/extensions/MobileFrontend	master	+1 -0

Customize query in gerrit

Related Objects

Mentioned Here: T220407: Unable to scroll notifications on iOS

Event Timeline

• Niedzielski created this task.Mar 26 2019, 8:14 PM

Restricted Application added a project: Growth-Team. · View Herald TranscriptMar 26 2019, 8:14 PM

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

ovasileva triaged this task as Low priority.Mar 27 2019, 11:46 AM

ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

• Niedzielski renamed this task from [Bug] Bit empty gutter shown in notifications panel to [Bug] Big empty gutter shown in notifications panel.Mar 27 2019, 1:35 PM

Marking as "external" to the Growth team since this is about the notifications overlay in MobileFrontend.

This bug is also noted in T220407: Unable to scroll notifications on iOS but not sure if those regressions were introduced at the same time.

The widget with the problem as far as I can see is defined in Echo not mobile-frontend. Does it just need a width:100% somewhere?

@Jdlrobson My apologies. I assumed this was controlled by MobileFrontend since the same component is not full width when used in Echo but that was just a guess. I didn't mean to dump it on your side.

I took a quick look though and it seems to be caused by this rule for tablets. I don't know if this is still desirable but it looks like it was intentional at the time.

Change 506071 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Disable max-width on notifications overlay on large screens

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

gerritbot added a project: Patch-For-Review.Apr 24 2019, 8:42 AM

Looks like the solution was straight forward (I think?!). Any chance of a review? ^

Jdlrobson moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog board.Apr 24 2019, 8:42 AM

To be clear the gutter we want to remove is the red area here:

Change 506071 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] 🐛 Notification overlay should take up full width on larger screens

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.3; 2019-04-30).Apr 25 2019, 2:00 PM

Looks like this got fixed. Not sure if Growth and/or Reading web should be QAing and signing this off since it touches two products. @ovasileva @JTannerWMF ?

Jdlrobson moved this task from To Do to Blocked on Others on the Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q4) board.May 2 2019, 8:53 PM

In T219320#5154343, @Jdlrobson wrote:

Looks like this got fixed. Not sure if Growth and/or Reading web should be QAing and signing this off since it touches two products. @ovasileva @JTannerWMF ?

I think we can QA this. Tested on production and it looks good to me, but I'll let @Edtadros confirm as well.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX, iPadPro, Pixel Slate

Test Artifact(s):
I tested this with a number of emulated devices in portrait mode. No white gutter appeared to the right of the notifications.

Edtadros updated the task description. (Show Details)May 8 2019, 9:47 AM

All done here!

	F28474391: Screenshot from 2019-03-26 14-10-21.png
	Mar 26 2019, 8:14 PM

	F28965831: T219320.png
	May 8 2019, 9:45 AM

	F28762733: gutter.png
	Apr 25 2019, 1:34 AM

[Bug] Big empty gutter shown in notifications panelClosed, ResolvedPublicActions