Page MenuHomePhabricator

Button layout needs adjustment
Closed, ResolvedPublic

Description

Checking the "Compare the contents before translating" step (T241589) of the Section Translation workflow, I noticed some misalignments in the primary button elements:

misaligned-button.png (441×616 px, 34 KB)

  • Padding at the top and the bottom of the button label is not balanced (bottom is thicker than top)
  • Icon is not vertically centered (it's closer to the top of the button)

The problem seem to be produced by the following issues:

  1. The icon which is expected to be 20x20px is inside a 30x30px span that breaks the alignment of it

misplaced-icon.png (437×830 px, 50 KB)

  1. Top and bottom paddings use fractions of pixel (9.143px). The standard padding for buttons is 16px for the sides and 8px for top and bottom.

fraction-pixel-padding.png (342×1 px, 59 KB)

Although the issue is exemplified on a particular step of the workflow, the solution may require the improvement of the more general button component.

Event Timeline

Pginer-WMF added a project: SectionTranslation.
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF added a subscriber: ngkountas.

Change 643698 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] UI lib: MWIcon unset min height/width styles

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

Change 643698 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] UI lib: MWIcon unset min height/width styles

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