Page MenuHomePhabricator

[minor] Help panel menu button illustrations are not vertically aligned to bottom
Closed, ResolvedPublic

Description

The position of the images are vertically centered in the Help dialog menu 'buttons':

Screen Shot 2022-05-19 at 12.25.17 PM.png (520×1 px, 100 KB)
Screen Shot 2022-05-19 at 12.26.06 PM.png (522×1 px, 77 KB)

It produces a somewhat unbalanced layout:

Screen Shot 2022-05-19 at 12.27.11 PM.png (1×744 px, 97 KB)
Screen Shot 2022-05-18 at 6.18.04 PM.png (569×366 px, 35 KB)

The expected design specification is that the images are aligned to the bottom right with 16px padding on all buttons:

image.png (1×862 px, 276 KB)

Figma spec here: https://www.figma.com/file/Pgo6fPGaDDiqXWGfMI8oiF/Growth---features?node-id=903%3A85316

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 793558 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Help panel: Vertically align text with image in HelpPanelHomeButtonWidget

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

The image is vertically centered but the text is not, so when there are multiple lines of text like in the suggested edits module, the text is more closely aligned with the image. I'm updating this for the text to be vertically centered as well.

1-line descriptionMulti-line description
Screen Shot 2022-05-20 at 10.11.38 AM.png (1×770 px, 105 KB)
Screen Shot 2022-05-20 at 10.09.36 AM.png (1×760 px, 108 KB)
RHo renamed this task from [minor] "mw-ge-help-panel-home-button-image" placement in Help panel to [minor] Help panel menu button illustrations are not vertically aligned to bottom.May 20 2022, 11:07 AM
RHo updated the task description. (Show Details)

Moving back to in progress to update per latest specs

Change 793558 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Help panel: Update text and image alignment in HelpPanelHomeButtonWidget

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

Checked in betalabs with uselang=he:

Screen Shot 2022-05-25 at 5.12.00 PM.png (1×1 px, 224 KB)

Checked on wmf.14 - the fix is in place:

Screen Shot 2022-06-01 at 4.53.03 PM.png (1×728 px, 104 KB)
Screen Shot 2022-06-01 at 4.48.35 PM.png (1×768 px, 118 KB)