Wrap dashboards dropdown items text

 - add wrapping styles

app/assets/javascripts/monitoring/components/dashboards_dropdown.vue

@@ -95,12 +95,10 @@ 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
@@ -115,7 +113,9 @@ export default {
           :is-checked="dashboard.path === selectedDashboardPath"
           @click="selectDashboard(dashboard)"
         >
-          {{ dashboardDisplayName(dashboard) }}
+          <span class="gl-overflow-hidden gl-overflow-wrap-break">
+            {{ dashboardDisplayName(dashboard) }}
+          </span>
         </gl-new-dropdown-item>
       </div>
 

changelogs/unreleased/astoicescu-truncate-dashboards-dropdown-items.yml

+---
+title: Wrap dashboards dropdown items text
+merge_request: 40367
+author:
+type: added