Merge branch 'kp-fix-related-items-card-styles' into 'master'

Add class `card` along with `card-slim` for Related Items apps

Closes #12925

See merge request gitlab-org/gitlab-ee!14759

ee/app/assets/javascripts/related_issues/components/related_issues_block.vue

@@ -161,7 +161,7 @@ export default {
 
 <template>
   <div class="related-issues-block">
-    <div class="card-slim">
+    <div class="card card-slim">
       <div :class="{ 'panel-empty-heading border-bottom-0': !hasBody }" class="card-header">
         <h3 class="card-title mt-0 mb-0 h5">
           {{ title }}
@@ -237,7 +237,7 @@ export default {
             :class="{
               'user-can-drag': canReorder,
               'sortable-row': canReorder,
-              'card-slim': canReorder,
+              'card card-slim': canReorder,
             }"
             :data-key="issue.id"
             :data-ordering-id="issuableOrderingId(issue)"

ee/app/assets/javascripts/related_items_tree/components/related_items_tree_app.vue

@@ -109,7 +109,7 @@ export default {
     </div>
     <div
       v-else
-      class="related-items-tree card-slim mt-2"
+      class="related-items-tree card card-slim mt-2"
       :class="{
         'disabled-content': disableContents,
         'overflow-auto': directChildren.length > $options.OVERFLOW_AFTER,

ee/app/assets/javascripts/related_items_tree/components/tree_item_body.vue

@@ -104,7 +104,7 @@ export default {
 </script>
 
 <template>
-  <div class="card-slim sortable-row flex-grow-1">
+  <div class="card card-slim sortable-row flex-grow-1">
     <div class="item-body card-body d-flex align-items-center p-2 p-xl-1 pl-xl-3">
       <div class="item-contents d-flex align-items-center flex-wrap flex-grow-1 flex-xl-nowrap">
         <div class="item-title d-flex align-items-center mb-1 mb-xl-0">

ee/app/views/projects/issues/_related_issues.html.haml

@@ -3,7 +3,7 @@
     can_add_related_issues: "#{can?(current_user, :admin_issue_link, @issue)}",
     help_path: help_page_path('user/project/issues/related_issues') } }
     .related-issues-block
-      .card-slim
+      .card.card-slim
         .card-header.panel-empty-heading.border-bottom-0
           %h3.card-title.mt-0.mb-0.h5
             Related issues