Page MenuHomePhabricator
Create Task
Maniphest T351697

[Zebra] Fix ToC alignment and subsection toggle buttons being cut off
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
ovasileva
Nov 21 2023, 9:07 AM
Tags
Referenced Files
F41650907: Screenshot 2024-01-04 at 12.47.50 PM.png
Jan 4 2024, 8:48 PM
F41650901: Screenshot 2024-01-04 at 12.45.33 PM.png
Jan 4 2024, 8:48 PM
F41650899: Screenshot 2024-01-04 at 12.44.57 PM.png
Jan 4 2024, 8:48 PM
F41650896: Screenshot 2024-01-04 at 12.44.29 PM.png
Jan 4 2024, 8:48 PM
F41650892: Screenshot 2024-01-04 at 12.43.54 PM.png
Jan 4 2024, 8:48 PM
F41591807: screenshot 376.png
Dec 11 2023, 1:22 AM
F41591804: screenshot 375.png
Dec 11 2023, 1:22 AM
F41591802: screenshot 374.png
Dec 11 2023, 1:22 AM
View All 20 Files
Subscribers
Aklapper
Edtadros
Jdlrobson
Jdrewniak
• Mabualruz
ovasileva

Description

Steps to recreate

  1. Go to https://fr.wikipedia.org/wiki/Conf%C3%A9rence_de_Moguilev
  2. Open the main menu and pin it to the sidebar
  3. Click the subsection toggle button

Expected

  • ToC and Main menu are aligned
  • The toggle button icon should be fully visible

Observed

Screenshot 2023-11-21 at 10.07.10 AM.png (1×562 px, 122 KB)

QA steps

Ensure the negative margins didn't affect the TOC in any of its myriad states.

  • The TOC in the sidebar is aligned with the main menu
  • The TOC arrows are fully visible (not clipped) in:
    • Sticky header
    • At low resolutions (in the floating button in the corner)
    • Beside the page title
  • The TOC text is not clipped when it spans multiple lines
    1. Developer notes
  • The cutting off of the toggle buttons is due to 'contains:paint' styles, which is inconsistently applied. It should be applied to the sticky elements

QA Results - Beta

ACStatusDetails
1✅T351697#9395368
2✅T351697#9395368
3✅T351697#9395368
4✅T351697#9395368
5✅T351697#9395368

QA Results - Production

ACStatusDetails
1✅T351697#9436286
2✅T351697#9436286
3✅T351697#9436286
4✅T351697#9436286
5✅T351697#9436286

Details

SubjectRepoBranchLines +/-
[Zebra] Update to 483c6bb Align sidebar TOC with main menumediawiki/skins/Vectormaster+7 -21
[Zebra] Align sidebar TOC with main menumediawiki/skins/Vectormaster+5 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

ovasileva triaged this task as High priority.Nov 21 2023, 9:07 AM
ovasileva created this task.
gerritbot added a comment.Nov 21 2023, 2:26 PM

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

[mediawiki/skins/Vector@master] [Zebra] Align sidebar TOC with main menu

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

gerritbot added a project: Patch-For-Review.Nov 21 2023, 2:26 PM
Jdrewniak updated the task description. (Show Details)Nov 21 2023, 2:30 PM
Jdrewniak added a comment.Nov 21 2023, 2:35 PM

When looking at the alignment, the underline for the TOC extends beyond the text, but that's addressed in T340481

Screenshot 2023-11-21 at 9.32.04 AM.png (719×324 px, 48 KB)

Jdrewniak removed • Mabualruz as the assignee of this task.Nov 21 2023, 3:23 PM
Jdrewniak moved this task from Incoming to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.
Jdrewniak added a subscriber: • Mabualruz.
gerritbot added a comment.Nov 21 2023, 5:10 PM

Change 976233 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Zebra] Align sidebar TOC with main menu

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

Maintenance_bot removed a project: Patch-For-Review.Nov 21 2023, 5:30 PM
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
ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.7; 2023-11-28).Nov 21 2023, 6:00 PM
Jdlrobson assigned this task to Edtadros.Nov 21 2023, 6:07 PM
Jdlrobson renamed this task from New Zebra styling offsets ToC to [unplanned] New Zebra styling offsets ToC .Nov 22 2023, 6:25 PM
Jdlrobson added a project: Unplanned-Sprint-Work.
gerritbot added a comment.Nov 28 2023, 6:10 PM

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

[mediawiki/skins/Vector@master] [Zebra] Update to 483c6bb Align sidebar TOC with main menu

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

gerritbot added a project: Patch-For-Review.Nov 28 2023, 6:10 PM
bwang removed Edtadros as the assignee of this task.Nov 30 2023, 5:19 PM
bwang moved this task from QA to Code Review on the Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4) board.
bwang added a subscriber: Edtadros.
KSarabia-WMF edited projects, added Web-Team-Backlog (FY2023-24 Q2 Sprint 5); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4).Nov 30 2023, 5:52 PM
ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.Nov 30 2023, 6:08 PM
Jdlrobson renamed this task from [unplanned] New Zebra styling offsets ToC to New Zebra styling offsets ToC .Nov 30 2023, 6:09 PM
ovasileva set the point value for this task to 2.Nov 30 2023, 6:18 PM

Check with @ovasileva before merging to see if there's any issues in non-Zebra version.

bwang renamed this task from New Zebra styling offsets ToC to [Zebra] Fix ToC alignment and subsection toggle buttons being cut off.Nov 30 2023, 6:48 PM
bwang updated the task description. (Show Details)
Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.Dec 4 2023, 8:47 PM
Edtadros assigned this task to ovasileva.Dec 5 2023, 6:40 AM

Test Result - Prod

Status: ❌ FAIL
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

❌ AC1: The TOC in the sidebar is aligned with the main menu
This looks the same as the observed, if it's the center of the toggle arrows then this is a pass, but I don't believe that is the alignment that is correct

screenshot 323.png (1×1 px, 448 KB)
screenshot 327.png (1×776 px, 323 KB)

The TOC arrows are fully visible (not clipped) in:
✅ AC2: Sticky header

screenshot 324.png (527×730 px, 112 KB)
screenshot 329.png (640×431 px, 110 KB)

✅ AC3: At low resolutions (in the floating button in the corner)

screenshot 325.png (605×548 px, 123 KB)
screenshot 329.png (640×431 px, 110 KB)

✅ AC4: Beside the page title

screenshot 326.png (723×767 px, 125 KB)
screenshot 330.png (617×408 px, 76 KB)

✅ AC5: The TOC text is not clipped when it spans multiple lines
See AC1

Edtadros mentioned this in T351126: Verify 1.42.0-wmf.7 deployment.Dec 5 2023, 8:49 AM
gerritbot added a comment.Dec 5 2023, 5:00 PM

Change 978114 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Zebra] Update to 483c6bb Align sidebar TOC with main menu

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

Maintenance_bot removed a project: Patch-For-Review.Dec 5 2023, 5:10 PM
Jdlrobson reassigned this task from ovasileva to Edtadros.Dec 5 2023, 5:49 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

Edward to repeat the test here now a fix has been merged.

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.9; 2023-12-12); removed MW-1.42-notes (1.42.0-wmf.7; 2023-11-28).Dec 5 2023, 7:00 PM
Edtadros removed Edtadros as the assignee of this task.Dec 11 2023, 1:22 AM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: The TOC in the sidebar is aligned with the main menu

screenshot 372.png (971×859 px, 282 KB)

The TOC arrows are fully visible (not clipped) in:
✅ AC2: Sticky header

screenshot 373.png (574×523 px, 103 KB)

✅ AC3: At low resolutions (in the floating button in the corner)
screenshot 374.png (963×624 px, 213 KB)

✅ AC4: Beside the page title
screenshot 375.png (764×872 px, 200 KB)

✅ AC5: The TOC text is not clipped when it spans multiple lines
screenshot 376.png (970×694 px, 267 KB)

Edtadros updated the task description. (Show Details)Dec 11 2023, 1:23 AM
ovasileva closed this task as Resolved.Dec 12 2023, 10:04 AM
ovasileva claimed this task.

Looks good in beta, resolving.

Jdlrobson added a project: Verified.Jan 4 2024, 8:48 PM

Test Result - Production

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

Test Artifact(s):

QA Steps

✅ AC1: The TOC in the sidebar is aligned with the main menu

Screenshot 2024-01-04 at 12.43.54 PM.png (686×268 px, 51 KB)

The TOC arrows are fully visible (not clipped) in:
✅ AC2: Sticky header

Screenshot 2024-01-04 at 12.44.29 PM.png (472×939 px, 145 KB)

✅ AC3: At low resolutions (in the floating button in the corner)
Screenshot 2024-01-04 at 12.44.57 PM.png (510×434 px, 90 KB)

✅ AC4: Beside the page title
Screenshot 2024-01-04 at 12.45.33 PM.png (475×340 px, 51 KB)

✅ AC5: The TOC text is not clipped when it spans multiple lines
Screenshot 2024-01-04 at 12.47.50 PM.png (509×582 px, 114 KB)

Jdlrobson updated the task description. (Show Details)Jan 4 2024, 8:48 PM
Jdlrobson mentioned this in T352463: Verify 1.42.0-wmf.9 deployment.Jan 4 2024, 8:57 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits