Fix: counter badges are misaligned in License Compliance tabs

ee/app/assets/javascripts/license_compliance/components/app.vue

@@ -139,7 +139,7 @@ export default {
       <gl-tab data-testid="licensesTab">
         <template #title>
           <span data-testid="licensesTabTitle">{{ s__('Licenses|Detected in Project') }}</span>
-          <gl-badge>{{ licenseCount }}</gl-badge>
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ licenseCount }}</gl-badge>
         </template>
 
         <detected-licenses-table />
@@ -150,7 +150,7 @@ export default {
           <span data-qa-selector="policies_tab" data-testid="policiesTabTitle">{{
             s__('Licenses|Policies')
           }}</span>
-          <gl-badge>{{ policyCount }}</gl-badge>
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ policyCount }}</gl-badge>
         </template>
 
         <license-management />

ee/changelogs/unreleased/323206-counter-badge-alignment.yml

+---
+title: Counter badges are misaligned in License Compliance tabs
+merge_request: 55517
+author:
+type: fixed

ee/spec/frontend/license_compliance/components/app_spec.js

@@ -177,7 +177,7 @@ describe('Project Licenses', () => {
     it('renders a "Detected in project" tab and a "Policies" tab', () => {
       expect(wrapper.find(GlTabs).exists()).toBe(true);
       expect(wrapper.find(GlTab).exists()).toBe(true);
-      expect(wrapper.findAll(GlTab)).toHaveLength(2);
+      expect(wrapper.findAllComponents(GlTab)).toHaveLength(2);
     });
 
     it('it renders the "Detected in project" table', () => {
@@ -279,11 +279,21 @@ describe('Project Licenses', () => {
       );
 
       it('it renders the correct count in "Detected in project" tab', () => {
-        expect(wrapper.findAll(GlBadge).at(0).text()).toBe(pageInfo.total.toString());
+        expect(wrapper.findAllComponents(GlBadge).at(0).text()).toBe(pageInfo.total.toString());
       });
 
       it('it renders the correct count in "Policies" tab', () => {
-        expect(wrapper.findAll(GlBadge).at(1).text()).toBe(managedLicenses.length.toString());
+        expect(wrapper.findAllComponents(GlBadge).at(1).text()).toBe(
+          managedLicenses.length.toString(),
+        );
+      });
+
+      it('it renders the correct type of badge styling', () => {
+        const badges = [
+          wrapper.findAllComponents(GlBadge).at(0),
+          wrapper.findAllComponents(GlBadge).at(1),
+        ];
+        badges.forEach((badge) => expect(badge.classes()).toContain('gl-tab-counter-badge'));
       });
     });