Backport of Resolve "Epics Page Styling is broken"

2 files changed, 8 insertions, 3 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
index 69d588eb25d..88360b46f24 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value.vue
+++ b/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)"
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
index 4397b00acfa..370a296bd8f 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
+++ b/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');