[Regression] Large gap appearing between menu and logo on Minerva
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	ovasileva
	Oct 21 2021, 3:33 PM

Project Tags

Referenced Files

	F34763586: Screen Shot 2021-11-23 at 9.26.27 AM.png
	Nov 23 2021, 5:59 PM

	F34763608: en.m.wikipedia.org_wiki_Hooded_skunk(iPad) (1).png
	Nov 23 2021, 5:59 PM

	F34763645: en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPad).png
	Nov 23 2021, 5:59 PM

	F34763643: en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPhone 11 Pro Max).png
	Nov 23 2021, 5:59 PM

	F34763594: en.m.wikipedia.org_wiki_Hooded_skunk(iPhone 11 Pro Max).png
	Nov 23 2021, 5:59 PM

	F34763721: en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPad) (1).png
	Nov 23 2021, 5:59 PM

	F34763913: Screen Shot 2021-11-23 at 9.54.29 AM.png
	Nov 23 2021, 5:59 PM

	F34763558: en.m.wikipedia.org_wiki_Main_Page(iPhone 11 Pro Max).png
	Nov 23 2021, 5:59 PM

Subscribers

View All 9 Subscribers

Description

List of steps to reproduce (step by step, including full links if applicable):

Go to https://en.m.wikipedia.org/wiki/Main_Page

What happens?:
The space between the menu icon and the logo is too wide

Screen Shot 2021-10-21 at 10.33.13 AM.png (974×1,486 px, 381 KB)

What should have happened instead?:

@alexhollender - could you add the expected state?

QA

Check spacing is improved compared with original report.

Visit all overlays and make sure there are no visual regressions at mobile, tablet, and desktop resolutions.

Focus the search to see the search overlay
Click edit. Check VisualEditor mode as well as wikitext editor mode.
Go to page with languages and click language button http://localhost:8888/w/index.php/Selenium_language_test_page
Go to talk page, and click "add new talk topic"
Go to talk page, and click a section heading
Click an image to show the media viewer overlay

QA Results - Beta

AC	Status	Details
1	✅	T294033#7524222
2	✅	T294033#7524222

QA Results - Prod

AC	Status	Details
1	✅	T294033#7524230
2	✅	T294033#7524230

Details

Related Changes in Gerrit:

Subject	Author	Repo	Branch	Lines +/-
Refactor Minerva header and overlay headers to use flexbox	Bernard Wang	mediawiki/skins/MinervaNeue	master	+128 -123
Clean up MobileFrontend overlay skin styles	Bernard Wang	mediawiki/skins/MinervaNeue	master	+0 -10
Update overlay header to use flexbox instead of table	Bernard Wang	mediawiki/extensions/MobileFrontend	master	+2 -8
Update search overlay to be aligned with the heading searchbox on all screen sizes	Bernard Wang	mediawiki/skins/MinervaNeue	master	+35 -14

Customize query in gerrit

Related Objects

Mentioned In: T296551: header broken on kindle devices
T295303: Update Foundation and Meta Wiki logos.
Mentioned Here: T296551: header broken on kindle devices

Event Timeline

ovasileva created this task.Oct 21 2021, 3:33 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptOct 21 2021, 3:33 PM

ovasileva triaged this task as Medium priority.Oct 21 2021, 3:34 PM

ovasileva raised the priority of this task from Medium to High.Oct 21 2021, 4:57 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Oct 22 2021, 6:48 PM

Jdlrobson moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.Oct 25 2021, 5:49 PM

Jdlrobson moved this task from Ready for Development to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

ovasileva assigned this task to • alexhollender_WMF.Oct 27 2021, 4:49 PM

ovasileva removed • alexhollender_WMF as the assignee of this task.Oct 27 2021, 4:52 PM

ovasileva set the point value for this task to 2.

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

@Jdlrobson @Jdrewniak Would either of you be opposed to updating the minerva header to use flexbox instead of table? Right now the spacing depends on the width of each of the table cell. This would let us to more reliably set exact spacing across different screen sizes, compared to the status quo (https://jmp.sh/2T1nQSm).

bwang claimed this task.Oct 28 2021, 6:06 PM

bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

In T294033#7466064, @bwang wrote:

@Jdlrobson @Jdrewniak Would either of you be opposed to updating the minerva header to use flexbox instead of table? Right now the spacing depends on the width of each of the table cell. This would let us to more reliably set exact spacing across different screen sizes, compared to the status quo (https://jmp.sh/2T1nQSm).

Hm, on second thought moving to flexbox seems pretty involved due to the way overlays and the header are tied. It might be tricky to ensure the search input in the search overlay and the buttons in the edit overlays align exactly with the header. Might need to touch MobileFrontend too

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

[mediawiki/skins/MinervaNeue@master] Refactor Minerva header to use flexbox

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

gerritbot added a project: Patch-For-Review.Oct 28 2021, 9:56 PM

Test wiki created on Patch Demo by BWang (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/4104be011d/w/

Nevermind to all that, I ended up trying it out and it wasn't too bad. You can try it out on the patchset here

bwang removed bwang as the assignee of this task.Oct 29 2021, 5:02 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

Test wiki on Patch Demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/4104be011d/w/~~

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

[mediawiki/skins/MinervaNeue@master] Update search overlay to be aligned with the heading searchbox on all screen sizes

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

Test wiki created on Patch Demo by BWang (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/e11abbd14b/w/

Jdlrobson claimed this task.Oct 29 2021, 7:16 PM

Change 735680 abandoned by Bernard Wang:

[mediawiki/skins/MinervaNeue@master] Update search overlay to be aligned with the heading searchbox on all screen sizes

Reason:

squashed into https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/735459

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

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

[mediawiki/extensions/MobileFrontend@master] Update overlay header to use flexbox

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

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

[mediawiki/skins/MinervaNeue@master] Clean up MobileFrontend overlay skin styles

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

Jdlrobson updated the task description. (Show Details)Nov 8 2021, 4:49 PM

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Nov 8 2021, 4:55 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Kanbanana-FY-2021-22) board.

Change 735459 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Refactor Minerva header and overlay headers to use flexbox

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

Jdlrobson updated the task description. (Show Details)Nov 8 2021, 5:08 PM

Jdlrobson mentioned this in T295303: Update Foundation and Meta Wiki logos..Nov 8 2021, 5:45 PM

The two remaining patches are cleanup, so I think it would be good to start QA now. I'll track the cleanup in a follow up task.

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.9; 2021-11-16).Nov 8 2021, 6:00 PM

Change 736018 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Update overlay header to use flexbox instead of table

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

Change 736266 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Clean up MobileFrontend overlay skin styles

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

Maintenance_bot removed a project: Patch-For-Review.Nov 12 2021, 5:10 PM

QutieBot added a project: QTE-TestingOverview.Nov 17 2021, 5:43 PM

QutieBot moved this task from Inbox to Edward on the QTE-TestingOverview board.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device: iPhone 11 Max Pro, iPad

Test Artifact(s):

QA Steps

✅ AC1: Check spacing is improved compared with original report.

en.m.wikipedia.beta.wmflabs.org_wiki_Main_Page(iPhone 11 Pro Max).png (1,242×2,688 px, 364 KB)

✅ AC2: Visit all overlays and make sure there are no visual regressions at mobile, tablet, and desktop resolutions.

	Mobile	Tablet	Desktop
Focus the search to see the search overlay
Click edit. Check VisualEditor mode as well as wikitext editor mode.
Go to page with languages and click language button
Go to talk page, and click "add new talk topic"
Go to talk page, and click a section heading
Click an image to show the media viewer overlay

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device: iPhone 11 Max Pro, iPad

Test Artifact(s):

QA Steps

✅ AC1: Check spacing is improved compared with original report.

en.m.wikipedia.org_wiki_Main_Page(iPhone 11 Pro Max).png (1,242×2,688 px, 668 KB)

✅ AC2: Visit all overlays and make sure there are no visual regressions at mobile, tablet, and desktop resolutions.

	Mobile	Tablet	Desktop
Focus the search to see the search overlay
Click edit. Check VisualEditor mode as well as wikitext editor mode.
Go to page with languages and click language button
Go to talk page, and click "add new talk topic"
Go to talk page, and click a section heading
Click an image to show the media viewer overlay