Merge branch '6287-epics-page-styling-is-broken' into 'master'

Resolve "Epics Page Styling is broken"

Closes #6287

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

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue

@@ -35,7 +35,12 @@ export default {
 </script>
 
 <template>
-  <div class="hide-collapsed value issuable-show-labels js-value">
+  <div
+    class="hide-collapsed value issuable-show-labels js-value"
+    :class="{
+      'has-labels':!isEmpty,
+    }"
+  >
     <span
       v-if="isEmpty"
       class="text-secondary"
@@ -50,7 +55,7 @@ export default {
     >
       <span
         v-tooltip
-        class="label color-label"
+        class="badge color-label"
         data-placement="bottom"
         data-container="body"
         :style="labelStyle(label)"

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

@@ -23,7 +23,10 @@ export default {
 <template>
   <div
     class="flex"
-    :class="{ 'issue-info-container': !canReorder }"
+    :class="{
+      'issue-info-container': !canReorder,
+      'card-body': canReorder,
+    }"
   >
     <div class="block-truncated append-right-10">
       <a

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

@@ -93,10 +93,13 @@ export default {
   },
   mounted() {
     if (this.canReorder) {
-      this.sortable = Sortable.create(this.$refs.list, Object.assign({}, sortableConfig, {
-        onStart: this.addDraggingCursor,
-        onEnd: this.reordered,
-      }));
+      this.sortable = Sortable.create(
+        this.$refs.list,
+        Object.assign({}, sortableConfig, {
+          onStart: this.addDraggingCursor,
+          onEnd: this.reordered,
+        }),
+      );
     }
   },
   methods: {
@@ -225,7 +228,7 @@ issue-count-badge-add-button btn btn-sm btn-default"
             :class="{
               'user-can-drag': canReorder,
               'sortable-row': canReorder,
-              card: canReorder
+              'card-slim': canReorder
             }"
             :data-key="issue.id"
             :data-epic-issue-id="issue.epic_issue_id"

spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js

@@ -82,7 +82,7 @@ describe('DropdownValueComponent', () => {
     });
 
     it('renders label element with tooltip and styles based on label details', () => {
-      const labelEl = vm.$el.querySelector('a span.label.color-label');
+      const labelEl = vm.$el.querySelector('a span.badge.color-label');
       expect(labelEl).not.toBeNull();
       expect(labelEl.dataset.placement).toBe('bottom');
       expect(labelEl.dataset.container).toBe('body');