Project sidebar badges alignment improvement

Sascha Eggenbergerrequested to merge
project-sidebar-badges-alignment-fix into master

What does this MR do and why?

Project sidebar badges alignment improvement

Moves badge alignment to use flex with gap.

  • Migrates the badge list to use flex and our default gap-2 between badges
  • Removes the gl-mr-3
  • Adjusts the line height of the items to 1 to normalize spacing

Screenshots or screen recordings

Before After
before after

How to set up and validate locally

  1. Go to Badge settings and add some badges if there aren't any
    1. Go to https://gdk.test:3000/flightjs/Flight/edit#js-badges-settings
    2. Add a couple of badges, e.g. via https://shields.io/badges
  2. Go to the project overview https://gdk.test:3000/flightjs/Flight and verify the badge alignment and spacing

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #512695 (closed)

Closes #537900 (closed)

Merge request reports