Align items in merge request dashboard64314-ci-icon

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

4 files changed, 17 insertions, 12 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 954551fef97..460d9ea9526 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -265,7 +265,6 @@ ul.controls {
   }
 
   .issuable-pipeline-broken a,
-  .issuable-pipeline-status a,
   .author-link {
     display: flex;
   }
diff --git a/app/views/ci/status/_icon.html.haml b/app/views/ci/status/_icon.html.haml
index f38bdb2e5ed..1249b98221f 100644
--- a/app/views/ci/status/_icon.html.haml
+++ b/app/views/ci/status/_icon.html.haml
@@ -1,9 +1,10 @@
-- 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}
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index eb516684e52..dee3931ff04 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/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
 
diff --git a/changelogs/unreleased/64314-ci-icon.yml b/changelogs/unreleased/64314-ci-icon.yml
new file mode 100644
index 00000000000..8a550b6fa5b
--- /dev/null
+++ b/changelogs/unreleased/64314-ci-icon.yml
@@ -0,0 +1,5 @@
+---
+title: Aligns CI icon in Merge Request dashboard
+merge_request: 30558
+author:
+type: fixed