Align items in merge request dashboard

Vertically aligns ci icon, avatar, and comments
icons in the merge request dashboard by using flex

app/assets/stylesheets/framework/lists.scss

@@ -265,7 +265,6 @@ ul.controls {
   }
 
   .issuable-pipeline-broken a,
-  .issuable-pipeline-status a,
   .author-link {
     display: flex;
   }

app/views/ci/status/_icon.html.haml

-- status            = local_assigns.fetch(:status)
-- size              = local_assigns.fetch(:size, 16)
-- type              = local_assigns.fetch(:type, 'pipeline')
-- tooltip_placement = local_assigns.fetch(:tooltip_placement, "left")
-- path              = local_assigns.fetch(:path, status.has_details? ? status.details_path : nil)
-- css_classes       = "ci-status-link ci-status-icon ci-status-icon-#{status.group} has-tooltip"
+- status             = local_assigns.fetch(:status)
+- size               = local_assigns.fetch(:size, 16)
+- type               = local_assigns.fetch(:type, 'pipeline')
+- tooltip_placement  = local_assigns.fetch(:tooltip_placement, "left")
+- path               = local_assigns.fetch(:path, status.has_details? ? status.details_path : nil)
+- option_css_classes = local_assigns.fetch(:option_css_classes, '')
+- css_classes       = "ci-status-link ci-status-icon ci-status-icon-#{status.group} has-tooltip #{option_css_classes}"
 - title             = s_("PipelineStatusTooltip|Pipeline: %{ci_status}") % {ci_status: status.label}
 - if type == 'commit'
   - title = s_("PipelineStatusTooltip|Commit: %{ci_status}") % {ci_status: status.label}

app/views/projects/merge_requests/_merge_request.html.haml

@@ -38,7 +38,7 @@
             = link_to_label(label, type: :merge_request, css_class: 'label-link')
 
     .issuable-meta
-      %ul.controls
+      %ul.controls.d-flex.align-items-end
         - if merge_request.merged?
           %li.issuable-status.d-none.d-sm-inline-block
             MERGED
@@ -47,14 +47,14 @@
             = icon('ban')
             CLOSED
         - if can?(current_user, :read_pipeline, merge_request.head_pipeline)
-          %li.issuable-pipeline-status.d-none.d-sm-inline-block
-            = render 'ci/status/icon', status: merge_request.head_pipeline.detailed_status(current_user)
+          %li.issuable-pipeline-status.d-none.d-sm-flex
+            = render 'ci/status/icon', status: merge_request.head_pipeline.detailed_status(current_user), option_css_classes: 'd-flex'
         - if merge_request.open? && merge_request.broken?
-          %li.issuable-pipeline-broken.d-none.d-sm-inline-block
+          %li.issuable-pipeline-broken.d-none.d-sm-flex
             = link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do
               = icon('exclamation-triangle')
         - if merge_request.assignees.any?
-          %li
+          %li.d-flex
             = render 'shared/issuable/assignees', project: merge_request.project, issuable: merge_request
         = render_if_exists 'projects/merge_requests/approvals_count', merge_request: merge_request
 

changelogs/unreleased/64314-ci-icon.yml

+---
+title: Aligns CI icon in Merge Request dashboard
+merge_request: 30558
+author:
+type: fixed