Merge branch '47915-badges' into 'master'

Resolve "Long labels names result in overflowing their description block under the Labels page"

Closes #47915

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

app/assets/stylesheets/pages/labels.scss

@@ -280,7 +280,7 @@
     width: 150px;
     flex-shrink: 0;
 
-    .label {
+    .badge {
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;

app/views/shared/boards/components/sidebar/_labels.html.haml

@@ -9,7 +9,7 @@
       None
     %a{ href: "#",
       "v-for" => "label in issue.labels" }
-      %span.badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
+      .badge.color-label.has-tooltip{ ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
         {{ label.title }}
   - if can_admin_issue?
     .selectbox

spec/features/labels_hierarchy_spec.rb

@@ -34,7 +34,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        expect(page).to have_selector('span.badge', text: label.title)
+        expect(page).to have_selector('.badge', text: label.title)
       end
     end
 
@@ -45,7 +45,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
       wait_for_requests
 
-      expect(page).not_to have_selector('span.badge', text: child_group_label.title)
+      expect(page).not_to have_selector('.badge', text: child_group_label.title)
     end
   end