Merge branch '343050-truncate-location-text-slot' into 'master'

Update dependency list css to be more responsive

See merge request gitlab-org/gitlab!83239

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

@@ -14,8 +14,8 @@ import DependencyLicenseLinks from './dependency_license_links.vue';
 import DependencyLocation from './dependency_location.vue';
 import DependencyVulnerabilities from './dependency_vulnerabilities.vue';
 
-const tdClass = (value, key, item) => {
-  const classes = [];
+const tdClass = (defaultClasses = []) => (value, key, item) => {
+  const classes = [...defaultClasses];
 
   // Don't draw a border between a row and its `row-details` slot
   // eslint-disable-next-line no-underscore-dangle
@@ -23,14 +23,6 @@ const tdClass = (value, key, item) => {
     classes.push('border-bottom-0');
   }
 
-  if (key === 'isVulnerable') {
-    classes.push('text-right');
-  }
-
-  if (key === 'location') {
-    classes.push('gl-md-max-w-15p');
-  }
-
   return classes;
 };
 
@@ -88,11 +80,11 @@ export default {
     },
   },
   fields: [
-    { key: 'component', label: s__('Dependencies|Component'), tdClass },
-    { key: 'packager', label: s__('Dependencies|Packager'), tdClass },
-    { key: 'location', label: s__('Dependencies|Location'), tdClass },
-    { key: 'license', label: s__('Dependencies|License'), tdClass },
-    { key: 'isVulnerable', label: '', tdClass },
+    { key: 'component', label: s__('Dependencies|Component'), tdClass: tdClass() },
+    { key: 'packager', label: s__('Dependencies|Packager'), tdClass: tdClass() },
+    { key: 'location', label: s__('Dependencies|Location'), tdClass: tdClass(['gl-md-max-w-26']) },
+    { key: 'license', label: s__('Dependencies|License'), tdClass: tdClass() },
+    { key: 'isVulnerable', label: '', tdClass: tdClass(['gl-text-right']) },
   ],
   DEPENDENCIES_PER_PAGE: 20,
   DEPENDENCY_PATH_LINK:

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

@@ -67,19 +67,19 @@ export default {
     <span>
       <component
         :is="locationComponent"
+        class="gl-md-white-space-nowrap"
         data-testid="dependency-path"
-        class="gl-display-inline-block gl-lg-display-block!"
         :href="location.blob_path"
       >
         <gl-icon v-if="isContainerImageDependency" name="container-image" />
         <gl-icon v-else name="doc-text" />
         <gl-truncate
-          class="gl-lg-max-w-80p gl-display-none gl-lg-display-inline-flex"
+          class="gl-display-none gl-md-display-inline-flex"
           position="start"
           :text="locationPath"
           with-tooltip
         />
-        <span class="gl-lg-display-none">{{ locationPath }}</span>
+        <span class="gl-md-display-none">{{ locationPath }}</span>
       </component>
       <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
     </span>