Page MenuHomePhabricator

Zebra: visual refinements - align left & right sidebar menus
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Assigned To
Authored By
Jdrewniak
Nov 16 2023, 4:46 PM
Referenced Files
F41561923: screenshot 166.mov.gif
Dec 5 2023, 7:10 AM
F41561904: screenshot 336.png
Dec 5 2023, 7:10 AM
F41561903: screenshot 337.png
Dec 5 2023, 7:10 AM
F41561898: screenshot 334.png
Dec 5 2023, 7:10 AM
F41549401: Screenshot 2023-11-30 at 2.56.49 PM.png
Nov 30 2023, 7:58 PM
F41549127: screenshot 307.png
Nov 30 2023, 5:22 PM
F41549116: screenshot 306.png
Nov 30 2023, 5:22 PM
F41549115: screenshot 305.png
Nov 30 2023, 5:22 PM

Description

This task is a merger of parts of T337950 and T319238

Due to vertical padding on .mw-body, the menus in the left and right sidebars in the Zebra CSS are vertically misaligned.

Screenshot 2023-11-16 at 11.21.10 AM.png (1×3 px, 609 KB)

The screenshot below shows how columnStart starts at a different height than columnEnd due to this vertical padding. This makes the sidebars difficult to align.

Screenshot 2023-11-16 at 11.40.13 AM.png (612×2 px, 258 KB)

This padding also causes the bottom of the footer to end at a different height than the content.

Screen_Shot_2022-09-29_at_9.52.43_AM-2.png (836×2 px, 252 KB)
Screen_Shot_2022-09-29_at_9.53.29_AM.png (880×2 px, 257 KB)
current paddingdesired result

Per T319238, we should remove the vertical padding from the .mw-body element in order to achieve better alignment.

A/C

  • .mw-body has no top/bottom padding
  • the underlines of the sidebar menus align with the underline on the tabs
  • the TOC ends at the same height as the content

https://phabricator.wikimedia.org/T351432#9372401
https://phabricator.wikimedia.org/T351432#9381767

QA Results - Beta

ACStatusDetails
1T351432#9372401
2T351432#9372401
3T351432#9373260

QA Results - Prod

ACStatusDetails
1T351432#9381767
2T351432#9381767
3T351432#9381767

Event Timeline

ovasileva set the point value for this task to 2.Nov 16 2023, 6:35 PM

Change 975923 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [Zebra] Vertically align sidebar menus

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

Change 975923 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Zebra] Vertically align sidebar menus

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

Edtadros removed Edtadros as the assignee of this task.EditedNov 30 2023, 5:22 PM
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: .mw-body has no top/bottom padding

screenshot 304.png (1×1 px, 329 KB)

✅ AC2: the underlines of the sidebar menus align with the underline on the tabs

screenshot 305.png (529×1 px, 145 KB)

screenshot 306.png (526×1 px, 151 KB)

❓ AC3: the TOC ends at the same height as the content
This may be due to the very short height of the content in this example. Is there a minimum height?

screenshot 307.png (846×1 px, 188 KB)

@Jdrewniak will move this to sign off upon further fleshing out of

❓ AC1: the TOC ends at the same height as the content

AC1: the TOC ends at the same height as the content

Thanks for that interesting example @Edtadros , where the ToC is actually longer than the content. That's a rare case but the screenshot looks correct, the ToC should only end with the content when the TOC has to be scrolled. On that beta page, the behaviour with a very short window still looks correct. (the ToC and content end at the same level then).

Screenshot 2023-11-30 at 2.56.49 PM.png (382×809 px, 84 KB)

Jdlrobson claimed this task.
Jdlrobson subscribed.

Test Result - Prod

Status: ✅ PASS | ❓
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: .mw-body has no top/bottom padding

screenshot 334.png (1×1 px, 501 KB)

❓ AC2: the underlines of the sidebar menus align with the underline on the tabs
It looks like the menus in the left sidebar are slightly higher than the underline on the tabs or the right side tools menu. I had to zoom it to be sure. Is this a pass or fail?

screenshot 337.png (670×1 px, 361 KB)

screenshot 336.png (672×1 px, 365 KB)

✅ AC3: the TOC ends at the same height as the content

screenshot 166.mov.gif (890×1 px, 3 MB)