1 files changed, 24 insertions, 24 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index aed27b5ea51..932efeaaf0e 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -2,10 +2,10 @@
 import { mapState, mapGetters } from 'vuex';
 import {
   GlIcon,
-  GlNewDropdown,
-  GlNewDropdownItem,
-  GlNewDropdownHeader,
-  GlNewDropdownDivider,
+  GlDropdown,
+  GlDropdownItem,
+  GlDropdownSectionHeader,
+  GlDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
 } from '@gitlab/ui';
@@ -17,10 +17,10 @@ const events = {
 export default {
   components: {
     GlIcon,
-    GlNewDropdown,
-    GlNewDropdownItem,
-    GlNewDropdownHeader,
-    GlNewDropdownDivider,
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownSectionHeader,
+    GlDropdownDivider,
     GlSearchBoxByType,
   },
   directives: {
@@ -73,21 +73,21 @@ export default {
 };
 </script>
 <template>
-  <gl-new-dropdown
+  <gl-dropdown
     toggle-class="dropdown-menu-toggle"
     menu-class="monitor-dashboard-dropdown-menu"
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header>
+      <gl-dropdown-section-header>{{ __('Dashboard') }}</gl-dropdown-section-header>
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
-        class="m-2"
+        class="gl-m-3"
       />
 
       <div class="flex-fill overflow-auto">
-        <gl-new-dropdown-item
+        <gl-dropdown-item
           v-for="dashboard in starredDashboards"
           :key="dashboard.path"
           :is-check-item="true"
@@ -95,28 +95,28 @@ export default {
           @click="selectDashboard(dashboard)"
         >
           <div class="gl-display-flex">
-            <div class="gl-flex-grow-1 gl-min-w-0">
-              <div class="gl-word-break-all">
-                {{ dashboardDisplayName(dashboard) }}
-              </div>
-            </div>
-            <gl-icon class="text-muted gl-flex-shrink-0" name="star" />
+            <span class="gl-flex-grow-1 gl-min-w-0 gl-overflow-hidden gl-overflow-wrap-break">
+              {{ dashboardDisplayName(dashboard) }}
+            </span>
+            <gl-icon class="text-muted gl-flex-shrink-0 gl-ml-3 gl-align-self-center" name="star" />
           </div>
-        </gl-new-dropdown-item>
-        <gl-new-dropdown-divider
+        </gl-dropdown-item>
+        <gl-dropdown-divider
           v-if="starredDashboards.length && nonStarredDashboards.length"
           ref="starredListDivider"
         />
 
-        <gl-new-dropdown-item
+        <gl-dropdown-item
           v-for="dashboard in nonStarredDashboards"
           :key="dashboard.path"
           :is-check-item="true"
           :is-checked="dashboard.path === selectedDashboardPath"
           @click="selectDashboard(dashboard)"
         >
-          {{ dashboardDisplayName(dashboard) }}
-        </gl-new-dropdown-item>
+          <span class="gl-overflow-hidden gl-overflow-wrap-break">
+            {{ dashboardDisplayName(dashboard) }}
+          </span>
+        </gl-dropdown-item>
       </div>
 
       <div
@@ -127,5 +127,5 @@ export default {
         {{ __('No matching results') }}
       </div>
     </div>
-  </gl-new-dropdown>
+  </gl-dropdown>
 </template>