Text wrap the license name

Add gl-friendly-wrap component to the
license column in dependency list

ee/app/assets/javascripts/dependencies/components/dependency_license_links.vue

 <script>
 import { uniqueId } from 'lodash';
 
-import { GlButton, GlLink, GlModal, GlModalDirective, GlIntersperse } from '@gitlab/ui';
+import {
+  GlButton,
+  GlLink,
+  GlModal,
+  GlModalDirective,
+  GlIntersperse,
+  GlFriendlyWrap,
+} from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 
 // If there are more licenses than this count, a counter will be displayed for the remaining licenses
@@ -15,6 +22,7 @@ export default {
     GlButton,
     GlLink,
     GlModal,
+    GlFriendlyWrap,
   },
   directives: {
     GlModalDirective,
@@ -70,7 +78,7 @@ export default {
         class="js-license-links-license-list-item"
       >
         <gl-link v-if="license.url" :href="license.url" target="_blank">{{ license.name }}</gl-link>
-        <template v-else>{{ license.name }}</template>
+        <gl-friendly-wrap v-else :text="license.name" />
       </span>
       <gl-button
         v-if="hasLicensesInModal"

ee/app/assets/javascripts/dependencies/components/dependency_location.vue

@@ -63,7 +63,7 @@ export default {
 
     <!-- We need to put an extra span to avoid separator between link & popover -->
     <span v-if="showMoreLink">
-      <gl-link ref="moreLink">{{ nMoreMessage }}</gl-link>
+      <gl-link ref="moreLink" class="gl-white-space-nowrap">{{ nMoreMessage }}</gl-link>
 
       <gl-popover
         :target="() => $refs.moreLink.$el"

ee/changelogs/unreleased/dj-fix-dep-table.yml

+---
+title: Text wrap the license name in Dependency List
+merge_request: 45242
+author:
+type: other