Restyled issues related merge request title

From the MD breakpoint up, the title should be truncated.
From MD breakpoint down, it should wrap as normal.

3 files changed, 15 insertions, 5 deletions

diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index aaa12716663..40290dfd568 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -194,10 +194,18 @@ $item-weight-max-width: 48px;
   }
 }
 
+.mr-status-wrapper {
+  line-height: 0;
+}
+
 @include media-breakpoint-up(sm) {
   .item-body {
-    .item-contents .item-title .sortable-link {
-      max-width: 90%;
+    .item-contents .item-title
+    .item-contents .item-title {
+      .mr-title-link,
+      .sortable-link {
+        max-width: 90%;
+      }
     }
   }
 }
@@ -216,6 +224,7 @@ $item-weight-max-width: 48px;
         width: 95%;
         margin-bottom: $gl-padding-4;
 
+        .mr-title-link,
         .sortable-link {
           text-overflow: ellipsis;
           overflow: hidden;
@@ -292,6 +301,7 @@ $item-weight-max-width: 48px;
         flex-basis: unset;
         font-weight: $gl-font-weight-normal;
 
+        .mr-title-link,
         .sortable-link {
           display: block;
           text-overflow: ellipsis;
diff --git a/app/views/projects/issues/_merge_requests.html.haml b/app/views/projects/issues/_merge_requests.html.haml
index d8406a2744c..2648a663ee3 100644
--- a/app/views/projects/issues/_merge_requests.html.haml
+++ b/app/views/projects/issues/_merge_requests.html.haml
@@ -17,14 +17,14 @@
             .item-contents
               .item-title.d-flex.align-items-center.mr-title
                 = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request, css_class: 'd-none d-lg-block append-right-8' }
-                = link_to merge_request.title, merge_request_path(merge_request)
+                = link_to merge_request.title, merge_request_path(merge_request), { class: 'mr-title-link'}
               .item-meta
                 = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request,  css_class: 'd-lg-none d-md-block append-right-5' }
                 %span.d-flex.align-items-center.append-right-8.mr-item-path.item-path-id.mt-0
                   %span.path-id-text.bold.text-truncate{ data: { toggle: 'tooltip'}, title: merge_request.target_project.full_name }
                     = merge_request.target_project.full_name
                   = merge_request.to_reference
-                %span.merge-request-ci-status.flex-md-grow-1.justify-content-end.d-flex
+                %span.merge-request-ci-status.flex-md-grow-1.justify-content-end.d-flex.ml-md-2
                   - if merge_request.head_pipeline
                     = render_pipeline_status(merge_request.head_pipeline, tooltip_placement: 'bottom')
                   - elsif has_any_head_pipeline
diff --git a/app/views/projects/issues/_merge_requests_status.html.haml b/app/views/projects/issues/_merge_requests_status.html.haml
index 0f2cd8c43f3..929265c8530 100644
--- a/app/views/projects/issues/_merge_requests_status.html.haml
+++ b/app/views/projects/issues/_merge_requests_status.html.haml
@@ -18,5 +18,5 @@
 
 - mr_status_tooltip = "<div class=\"mb-1\"><span class=\"bold\">#{mr_status_title}</span> #{time_ago_in_words(mr_status_date)} ago</div><span class=\"text-tertiary\">#{l(mr_status_date.to_time, format: time_format)}</span>"
 
-%span.suggestion-help-hover{ class: css_class, data: { toggle: 'tooltip', placement: 'bottom', html: 'true', title:  mr_status_tooltip } }
+%span.mr-status-wrapper.suggestion-help-hover{ class: css_class, data: { toggle: 'tooltip', placement: 'bottom', html: 'true', title:  mr_status_tooltip } }
   = sprite_icon(mr_status_icon, size: 16, css_class: "merge-request-status #{mr_status_class}")