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

Assigned To

Authored By

	Jdrewniak
	Nov 16 2023, 4:46 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.


current padding	desired 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

AC	Status	Details
1	✅	T351432#9372401
2	✅	T351432#9372401
3	✅	T351432#9373260

QA Results - Prod

AC	Status	Details
1	✅	T351432#9381767
2	❓	T351432#9381767
3	✅	T351432#9381767

Details

	Subject	Repo	Branch	Lines +/-
	[Zebra] Vertically align sidebar menus	mediawiki/skins/Vector	master	+4 -19

Customize query in gerrit

Related Objects

Mentioned In: T351126: Verify 1.42.0-wmf.7 deployment
T337950: Zebra: visual refinements
T319238: Move vertical padding from .mw-body element
Mentioned Here: T319238: Move vertical padding from .mw-body element
T337950: Zebra: visual refinements

Event Timeline

Jdrewniak created this task.Nov 16 2023, 4:46 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 16 2023, 4:46 PM

Jdrewniak mentioned this in T319238: Move vertical padding from .mw-body element.Nov 16 2023, 4:49 PM

Jdrewniak mentioned this in T337950: Zebra: visual refinements.Nov 16 2023, 5:15 PM

Jdrewniak merged tasks: T337950: Zebra: visual refinements, T319238: Move vertical padding from .mw-body element.Nov 16 2023, 5:34 PM

Jdrewniak added subscribers: Patafisik_WMF, bwang, Ladsgroup and 3 others.

Jdlrobson moved this task from Incoming to Web Team FY2023-24 Q2 Sprint 4 on the Web-Team-Backlog board.Nov 16 2023, 5:57 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4); removed Web-Team-Backlog.

ovasileva triaged this task as High priority.Nov 16 2023, 6:01 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

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

Jdrewniak claimed this task.Nov 20 2023, 10:03 PM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

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

gerritbot added a project: Patch-For-Review.Nov 21 2023, 3:40 AM

Jdrewniak removed Jdrewniak as the assignee of this task.Nov 21 2023, 3:43 AM

Jdrewniak moved this task from Doing to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 21 2023, 5:35 PM

Jdlrobson assigned this task to Edtadros.Nov 21 2023, 6:07 PM

Change 975923 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Nov 21 2023, 7:30 PM

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.7; 2023-11-28).Nov 21 2023, 8:00 PM

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

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

❓ 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?

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

Jdrewniak moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.Nov 30 2023, 7:59 PM

Jdlrobson closed this task as Resolved.Dec 2 2023, 12:57 AM

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

❓ 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?

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

Edtadros updated the task description. (Show Details)Dec 5 2023, 7:13 AM

Edtadros mentioned this in T351126: Verify 1.42.0-wmf.7 deployment.Dec 5 2023, 8:49 AM

	F41549401: Screenshot 2023-11-30 at 2.56.49 PM.png
	Nov 30 2023, 7:58 PM

	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

	F41549127: screenshot 307.png
	Nov 30 2023, 5:22 PM

Zebra: visual refinements - align left & right sidebar menusClosed, ResolvedPublic2 Estimated Story PointsBUG REPORTActions

Description

A/C

QA Results - Beta

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

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