Issues related merge requests style updates

- Changed the section title
- Updated the padding of items for various breakpoints
- Updated the breakpoints for status icons
- Replaced project path with name
- Added missing i18n

app/assets/stylesheets/components/related_items_list.scss

@@ -200,7 +200,6 @@ $item-weight-max-width: 48px;
 
 @include media-breakpoint-up(sm) {
   .item-body {
-    .item-contents .item-title
     .item-contents .item-title {
       .mr-title-link,
       .sortable-link {
@@ -218,7 +217,7 @@ $item-weight-max-width: 48px;
 
       .item-title {
         flex-basis: unset;
-        // 98% because we compensate
+        // 95% because we compensate
         // for remove button which is
         // positioned absolutely
         width: 95%;

app/views/projects/issues/_merge_requests.html.haml

@@ -3,7 +3,7 @@
     .card-header
       %h2.card-title.mt-0.mb-0.h5.merge-requests-title
         %span.mr-1.bold
-          = pluralize(@merge_requests.count, 'Related Merge Request')
+          = _('Related merge requests')
         .d-inline-flex.lh-100.align-middle
           .mr-count-badge
             .mr-count-badge-count
@@ -13,16 +13,16 @@
       - has_any_head_pipeline = @merge_requests.any?(&:head_pipeline_id)
       - @merge_requests.each do |merge_request|
         %li.list-item.py-0.px-0
-          .item-body.issuable-info-container.py-md-3.px-md-3
+          .item-body.issuable-info-container.py-lg-3.px-lg-3.pl-md-3
             .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' }
+                = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request, css_class: 'd-none d-xl-block append-right-8' }
                 = 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' }
+                = render partial: 'projects/issues/merge_requests_status', locals: { merge_request: merge_request,  css_class: 'd-xl-none d-lg-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
+                  %span.path-id-text.bold.text-truncate{ data: { toggle: 'tooltip'}, title: merge_request.target_project.full_path }
+                    = merge_request.target_project.full_path
                   = merge_request.to_reference
                 %span.merge-request-ci-status.flex-md-grow-1.justify-content-end.d-flex.ml-md-2
                   - if merge_request.head_pipeline

app/views/projects/issues/_merge_requests_status.html.haml

@@ -2,17 +2,17 @@
 
 - if merge_request.merged?
   - mr_status_date = merge_request.merged_at
-  - mr_status_title = 'Merged'
+  - mr_status_title = _('Merged')
   - mr_status_icon = 'merge'
   - mr_status_class = 'merged'
 - elsif merge_request.closed?
   - mr_status_date = merge_request.closed_event&.created_at
-  - mr_status_title = 'Closed'
+  - mr_status_title = _('Closed')
   - mr_status_icon = 'issue-close'
   - mr_status_class = 'closed'
 - else
   - mr_status_date = merge_request.created_at
-  - mr_status_title = 'Opened'
+  - mr_status_title = _('Opened')
   - mr_status_icon = 'issue-open-m'
   - mr_status_class = 'open'