Pipeline dropdown status regression

Summary

The pipeline jobs dropdown has lost the padding that formatted each job item.

Before Regression
Screen_Shot_2019-12-11_at_3.32.03_PM image

This was caused by https://gitlab.com/gitlab-org/gitlab/merge_requests which ensured that only anchor tags directly below the list element would have the expected CSS. The job dropdowns have a <div> wrapping the anchor tag, so it is more than one level down and thus not affected by the CSS.

Steps to reproduce

  • Go to the https://gitlab.com/gitlab-org/gitlab/pipelines page
  • Click on a stage icon
  • See the chaos

What is the current bug behavior?

image

What is the expected correct behavior?

Screen_Shot_2019-12-11_at_3.32.03_PM

Possible fixes

Option 1

We could use a more specific class for the job dropdown to be included in the selection.

Instead of

    > a,
    button,
    .menu-item {
      @include dropdown-link;
    }

We could add

    > a,
    button,
    .mini-pipeline-graph-dropdown-item,
    .menu-item {
      @include dropdown-link;
    }

Option 2

We could add the menu-item class to the job dropdown item.

The job_item component on line 114 would be changed to include the menu-item class.