Page MenuHomePhabricator

[S] Sticky header icon buttons are missing padding
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Visual regression introduced by T320101. More context

Steps to replicate the issue (include links if applicable):

What happens?:
The sticky header icon buttons dont have padding

What should have happened instead?:
There should be 8px padding between each icon button

Screenshots comparing change to master prior to deployment of visual enhancements feature flag:

Screen Shot 2022-11-15 at 4.42.27 PM.png (1×2 px, 580 KB)

https://jmp.sh/w9fMa6NB

QA Results - Beta

ACStatusDetails
1T323176#8411668

QA Results - Prod

ACStatusDetails
1T323176#8418542

Event Timeline

This was broken by https://github.com/wikimedia/Vector/commit/16da6a5e6a484088cd45224335c58e8ae203ffcd

Quoting @bwang this "Should be a simple fix of reapplying the column-gap to vector-sticky-header-icons . I don’t think we want to be applying it to all the other containers like it was originally though. otherwise there will be extra padding between the ULS button, the edit button, and the user menu dropdown (edited) "

Jdlrobson set the point value for this task to 1.Nov 16 2022, 11:18 PM
LGoto renamed this task from Sticky header icon buttons are missing padding to [S] Sticky header icon buttons are missing padding.Nov 17 2022, 6:20 PM

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

[mediawiki/skins/Vector@master] Fix icon button spacing in sticky header

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

bwang removed bwang as the assignee of this task.Nov 18 2022, 5:20 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

This was broken by https://github.com/wikimedia/Vector/commit/16da6a5e6a484088cd45224335c58e8ae203ffcd

Quoting @bwang this "Should be a simple fix of reapplying the column-gap to vector-sticky-header-icons . I don’t think we want to be applying it to all the other containers like it was originally though. otherwise there will be extra padding between the ULS button, the edit button, and the user menu dropdown (edited) "

I realized that the spacing will be slightly off work if the language button isnt in the sticky header. I still think the simple solution of applying column-gap to .vector-sticky-header-icons is worth doing, but down the line I think we should implement a more robust solution that generically applies to both personal tools and the sticky header, regardless of their composition of regular buttons, icon buttons or links. This should be possible after T323244. We could refactor the .vector-sticky-header-end container to be a flat list of elements. Then we could use column-gap and negative margins on regular buttons to achieve the spacing we want.

Change 858627 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix icon button spacing in sticky header

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?useskin=vector-2022
Log in
Scroll down to see the sticky header
✅ AC1: There should be 8px padding between each icon button

Screenshot 2022-11-21 at 3.53.19 PM.png (1×1 px, 512 KB)

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

[mediawiki/skins/Vector@wmf/1.40.0-wmf.10] Fix icon button spacing in sticky header

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

Change 859508 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.10] Fix icon button spacing in sticky header

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

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:44:17Z] <samtar@deploy1002> Started scap: Backport for [[gerrit:859508|Fix icon button spacing in sticky header (T323176)]]

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:44:39Z] <samtar@deploy1002> samtar and bwang: Backport for [[gerrit:859508|Fix icon button spacing in sticky header (T323176)]] synced to the testservers: mwdebug2001.codfw.wmnet, mwdebug1001.eqiad.wmnet, mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:51:42Z] <samtar@deploy1002> Finished scap: Backport for [[gerrit:859508|Fix icon button spacing in sticky header (T323176)]] (duration: 07m 25s)

Edtadros subscribed.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.org/wiki/Polar_bear?useskin=vector-2022
Log in
Scroll down to see the sticky header
✅ AC1: There should be 8px padding between each icon button

Screenshot 2022-11-23 at 1.03.07 PM.png (1×998 px, 470 KB)