Update dependency list css to be more responsive

- ensure table never scrolls past view port
- move to a stacked table at md width instead
  of at small to ensure table does not
  require scrolling

- update style method to use currying

Changelog: changed

EE: true

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-25']) },
+    { key: 'license', label: s__('Dependencies|License'), tdClass: tdClass() },
+    { key: 'isVulnerable', label: '', tdClass: tdClass(['text-right']) },
   ],
   DEPENDENCIES_PER_PAGE: 20,
   DEPENDENCY_PATH_LINK:
@@ -111,6 +103,7 @@ export default {
     :fields="$options.fields"
     :items="localDependencies"
     :busy="isLoading"
+    responsive
     data-qa-selector="dependencies_table_content"
     details-td-class="pt-0"
     stacked="md"

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

@@ -67,19 +67,13 @@ export default {
     <span>
       <component
         :is="locationComponent"
+        class="gl-white-space-nowrap gl-display-block gl-mr-5"
         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"
-          position="start"
-          :text="locationPath"
-          with-tooltip
-        />
-        <span class="gl-lg-display-none">{{ locationPath }}</span>
+        <gl-truncate position="start" :text="locationPath" with-tooltip />
       </component>
       <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
     </span>

ee/app/assets/stylesheets/components/vulnerability_list.scss

@@ -92,3 +92,10 @@ $selection-summary-with-error-height: 118px;
     @include sticky-top-positioning($security-filter-height + $selection-summary-with-error-height);
   }
 }
+
+// TODO: move to gitlab-ui
+.gl-md-max-w-25 {
+  @media (min-width: 768px) {
+    max-width: 25 * px-to-rem(8px);
+  }
+}