Fix code quality icons alignment

This is an actionable insight from the UX Department: MRs experience async critique research (insight).

What

In the merge request widget for code quality, the icon-text alignment is off in multiple instances:

  1. Vertical alignment of the question mark/help icon
  2. Vertically centering of the icons to the code quality issues text. When visually scanning your eye tracks down to the icon and then scanning right has to move back up to find the start of the text. That makes it take longer to discern.

image

Why

These alignment/spacing issues contribute to a lack of polish in the UI and impact the sense of trust that users place on the product.

How

Fix code quality icons alignment

Spacing should meet the Pajamas specifications https://design.gitlab.com/layout/spacing

Edited by Pedro Moreira da Silva