diff --git a/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue b/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
index b2b033de75ddf755b55848596416bed53537bc6c..b151e1605dad411ca5cd9858ae3195b32a544255 100644
--- a/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
+++ b/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue
@@ -7,6 +7,7 @@ import {
   GlDropdownSectionHeader,
   GlDropdownItem,
   GlSearchBoxByType,
+  GlTruncate,
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { filterBySearchTerm } from '~/analytics/shared/utils';
@@ -28,6 +29,7 @@ export default {
     GlDropdownSectionHeader,
     GlDropdownItem,
     GlSearchBoxByType,
+    GlTruncate,
   },
   props: {
     groupId: {
@@ -212,30 +214,29 @@ export default {
   <gl-dropdown
     ref="projectsDropdown"
     class="dropdown dropdown-projects"
-    toggle-class="gl-shadow-none"
+    toggle-class="gl-shadow-none gl-mb-0"
     :loading="loadingDefaultProjects"
     :show-clear-all="hasSelectedProjects"
     show-highlighted-items-title
     highlighted-items-title-class="gl-p-3"
+    block
     @clear-all.stop="onClearAll"
     @hide="onHide"
   >
     <template #button-content>
-      <gl-loading-icon v-if="loadingDefaultProjects" class="gl-mr-2" />
-      <div class="gl-display-flex gl-flex-grow-1">
-        <gl-avatar
-          v-if="isOnlyOneProjectSelected"
-          :src="selectedProjects[0].avatarUrl"
-          :entity-id="getEntityId(selectedProjects[0])"
-          :entity-name="selectedProjects[0].name"
-          :size="16"
-          :shape="$options.AVATAR_SHAPE_OPTION_RECT"
-          :alt="selectedProjects[0].name"
-          class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
-        />
-        {{ selectedProjectsLabel }}
-      </div>
-      <gl-icon class="gl-ml-2" name="chevron-down" />
+      <gl-loading-icon v-if="loadingDefaultProjects" class="gl-mr-2 gl-flex-shrink-0" />
+      <gl-avatar
+        v-if="isOnlyOneProjectSelected"
+        :src="selectedProjects[0].avatarUrl"
+        :entity-id="getEntityId(selectedProjects[0])"
+        :entity-name="selectedProjects[0].name"
+        :size="16"
+        :shape="$options.AVATAR_SHAPE_OPTION_RECT"
+        :alt="selectedProjects[0].name"
+        class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2 gl-flex-shrink-0"
+      />
+      <gl-truncate :text="selectedProjectsLabel" class="gl-min-w-0 gl-flex-grow-1" />
+      <gl-icon class="gl-ml-2 gl-flex-shrink-0" name="chevron-down" />
     </template>
     <template #header>
       <gl-dropdown-section-header>{{ __('Projects') }}</gl-dropdown-section-header>
diff --git a/ee/app/assets/stylesheets/pages/security/compliance_dashboard.scss b/ee/app/assets/stylesheets/pages/security/compliance_dashboard.scss
index c3d6e0f38f495c4cfd528987736dbdbdb13fed5e..9ee9fb781f13b8718115a71a6a10262b63d75115 100644
--- a/ee/app/assets/stylesheets/pages/security/compliance_dashboard.scss
+++ b/ee/app/assets/stylesheets/pages/security/compliance_dashboard.scss
@@ -1,6 +1,6 @@
 .compliance-filter-dropdown-input {
   @include media-breakpoint-up(md) {
-    max-width: 11rem;
+    width: 11rem;
   }
 }
 
diff --git a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
index 386fb4eb616dd914bd323e781aa7888a5b1e0115..69918c1db65b76254638b9ea7c69d1dba5b89a90 100644
--- a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
+++ b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlTruncate } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { stubComponent } from 'helpers/stub_component';
@@ -76,8 +76,8 @@ describe('ProjectsDropdownFilter component', () => {
 
   const findHighlightedItems = () => wrapper.findByTestId('vsa-highlighted-items');
   const findUnhighlightedItems = () => wrapper.findByTestId('vsa-default-items');
-  const findHighlightedItemsTitle = () => wrapper.findByText('Selected');
   const findClearAllButton = () => wrapper.findByText('Clear all');
+  const findSelectedProjectsLabel = () => wrapper.findComponent(GlTruncate);
 
   const findDropdown = () => wrapper.find(GlDropdown);
 
@@ -158,8 +158,8 @@ describe('ProjectsDropdownFilter component', () => {
         expect(findSelectedDropdownItems().length).toBe(0);
       });
 
-      it('does not render the highlighted items title', () => {
-        expect(findHighlightedItemsTitle().exists()).toBe(false);
+      it('renders the default project label text', () => {
+        expect(findSelectedProjectsLabel().text()).toBe('Select projects');
       });
 
       it('does not render the clear all button', () => {
@@ -180,7 +180,7 @@ describe('ProjectsDropdownFilter component', () => {
       });
 
       it('renders the highlighted items title', () => {
-        expect(findHighlightedItemsTitle().exists()).toBe(true);
+        expect(findSelectedProjectsLabel().text()).toBe(projects[0].name);
       });
 
       it('renders the clear all button', () => {
@@ -190,13 +190,12 @@ describe('ProjectsDropdownFilter component', () => {
       it('clears all selected items when the clear all button is clicked', async () => {
         await selectDropdownItemAtIndex(1);
 
-        expect(wrapper.text()).toContain('2 projects selected');
+        expect(findSelectedProjectsLabel().text()).toBe('2 projects selected');
 
         findClearAllButton().trigger('click');
         await nextTick();
 
-        expect(wrapper.text()).not.toContain('2 projects selected');
-        expect(wrapper.text()).toContain('Select projects');
+        expect(findSelectedProjectsLabel().text()).toBe('Select projects');
       });
     });
   });