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

Backport of Resolve "Epics Page Styling is broken"

See merge request gitlab-org/gitlab-ce!19407

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)"

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');