Page MenuHomePhabricator

[Regression] Large gap appearing between menu and logo on Minerva
Open, HighPublic2 Estimated Story PointsBUG REPORT

Description

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

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 (1×974 px, 381 KB)

What should have happened instead?:

@alexhollender - could you add the expected state?

QA

  1. Check spacing is improved compared with original report.
  1. 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

ACStatusDetails
1T294033#7524222
2T294033#7524222

QA Results - Prod

ACStatusDetails
1T294033#7524230
2T294033#7524230

Event Timeline

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
ovasileva set the point value for this task to 2.

@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).

@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

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

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/

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

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

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.

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

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 (2×1 px, 364 KB)

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

MobileTabletDesktop
Focus the search to see the search overlay
en.m.wikipedia.org_wiki_Main_Page(iPhone 11 Pro Max).png (2×1 px, 75 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Main_Page(iPad).png (2×1 px, 67 KB)
Screen Shot 2021-11-23 at 9.26.14 AM.png (920×755 px, 67 KB)
Click edit. Check VisualEditor mode as well as wikitext editor mode.
en.m.wikipedia.beta.wmflabs.org_wiki_Hooded_skunk(iPhone 11 Pro Max) (1).png (2×1 px, 204 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Hooded_skunk(iPhone 11 Pro Max).png (2×1 px, 270 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Hooded_skunk(iPad) (1).png (2×1 px, 200 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Hooded_skunk(iPad).png (2×1 px, 393 KB)
Screen Shot 2021-11-23 at 9.32.33 AM.png (921×754 px, 167 KB)
Screen Shot 2021-11-23 at 9.31.41 AM.png (919×753 px, 286 KB)
Go to page with languages and click language button
en.m.wikipedia.beta.wmflabs.org_wiki_Albert_Einstein(iPhone 11 Pro Max) (1).png (2×1 px, 106 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Albert_Einstein(iPad).png (2×1 px, 89 KB)
Screen Shot 2021-11-23 at 9.37.34 AM.png (921×754 px, 264 KB)
Go to talk page, and click "add new talk topic"
en.m.wikipedia.beta.wmflabs.org_wiki_Talk_Albert_Einstein(iPhone 11 Pro Max).png (2×1 px, 139 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Talk_Albert_Einstein(iPad).png (2×1 px, 107 KB)
Screen Shot 2021-11-23 at 9.40.43 AM.png (920×753 px, 36 KB)
Go to talk page, and click a section heading
en.m.wikipedia.beta.wmflabs.org_wiki_Talk_Albert_Einstein(iPhone 11 Pro Max) (1).png (2×1 px, 170 KB)
en.m.wikipedia.beta.wmflabs.org_wiki_Talk_Albert_Einstein(iPad) (1).png (2×1 px, 121 KB)
Screen Shot 2021-11-23 at 9.49.05 AM.png (920×754 px, 140 KB)
Click an image to show the media viewer overlay
en.m.wikipedia.beta.wmflabs.org_wiki_Albert_Einstein(iPhone 11 Pro Max) (2).png (2×1 px, 3 MB)
Screen Shot 2021-11-23 at 9.53.16 AM.png (836×629 px, 709 KB)
Screen Shot 2021-11-23 at 9.52.17 AM.png (920×755 px, 901 KB)
Edtadros added a subscriber: Edtadros.

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 (2×1 px, 668 KB)

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

MobileTabletDesktop
Focus the search to see the search overlay
en.m.wikipedia.beta.wmflabs.org_wiki_Main_Page(iPhone 11 Pro Max) (1).png (2×1 px, 75 KB)
en.m.wikipedia.org_wiki_Main_Page(iPad).png (2×1 px, 67 KB)
Screen Shot 2021-11-23 at 9.26.27 AM.png (920×754 px, 23 KB)
Click edit. Check VisualEditor mode as well as wikitext editor mode.
en.m.wikipedia.org_wiki_Hooded_skunk(iPhone 11 Pro Max).png (2×1 px, 144 KB)
en.m.wikipedia.org_wiki_Hooded_skunk(iPhone 11 Pro Max) (1).png (2×1 px, 436 KB)
en.m.wikipedia.org_wiki_Hooded_skunk(iPad) (1).png (2×1 px, 309 KB)
en.m.wikipedia.org_wiki_Hooded_skunk(iPad).png (2×1 px, 945 KB)
Screen Shot 2021-11-23 at 9.31.52 AM.png (920×753 px, 279 KB)
Screen Shot 2021-11-23 at 9.32.40 AM.png (919×756 px, 132 KB)
Go to page with languages and click language button
en.m.wikipedia.org_wiki_Albert_Einstein(iPhone 11 Pro Max).png (2×1 px, 208 KB)
en.m.wikipedia.org_wiki_Albert_Einstein(iPad).png (2×1 px, 178 KB)
Screen Shot 2021-11-23 at 9.37.45 AM.png (919×755 px, 344 KB)
Go to talk page, and click "add new talk topic"
en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPhone 11 Pro Max).png (2×1 px, 146 KB)
en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPad).png (2×1 px, 111 KB)
Screen Shot 2021-11-23 at 9.41.42 AM.png (918×754 px, 43 KB)
Go to talk page, and click a section heading
en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPhone 11 Pro Max) (1).png (2×1 px, 242 KB)
en.m.wikipedia.org_wiki_Talk_Albert_Einstein(iPad) (1).png (2×1 px, 167 KB)
Screen Shot 2021-11-23 at 9.49.14 AM.png (917×754 px, 105 KB)
Click an image to show the media viewer overlay
en.m.wikipedia.org_wiki_Albert_Einstein(iPhone 11 Pro Max) (1).png (2×1 px, 3 MB)
Screen Shot 2021-11-23 at 9.55.53 AM.png (840×629 px, 731 KB)
Screen Shot 2021-11-23 at 9.54.29 AM.png (919×752 px, 892 KB)

FYI: this change broke the interface on Kindle devices, because they don't support flex box, and there isn't a fallback in place.

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:

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