1 files changed, 29 insertions, 25 deletions

diff --git a/app/assets/javascripts/packages/shared/components/package_list_row.vue b/app/assets/javascripts/packages/shared/components/package_list_row.vue
index e000279b794..f93bc51d185 100644
--- a/app/assets/javascripts/packages/shared/components/package_list_row.vue
+++ b/app/assets/javascripts/packages/shared/components/package_list_row.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
 import PackageTags from './package_tags.vue';
 import PublishMethod from './publish_method.vue';
 import { getPackageTypeLabel } from '../utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
 
 export default {
   name: 'PackageListRow',
@@ -12,8 +13,10 @@ export default {
     GlIcon,
     GlLink,
     GlSprintf,
+    GlTruncate,
     PackageTags,
     PublishMethod,
+    ListItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -59,15 +62,15 @@ export default {
 </script>
 
 <template>
-  <div class="gl-responsive-table-row" data-qa-selector="packages-row">
-    <div class="table-section section-50 d-flex flex-md-column justify-content-between flex-wrap">
-      <div class="d-flex align-items-center mr-2">
+  <list-item data-qa-selector="package_row">
+    <template #left-primary>
+      <div class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0">
         <gl-link
           :href="packageLink"
+          class="gl-text-body gl-min-w-0"
           data-qa-selector="package_link"
-          class="text-dark font-weight-bold mb-md-1"
         >
-          {{ packageEntity.name }}
+          <gl-truncate :text="packageEntity.name" />
         </gl-link>
 
         <package-tags
@@ -78,41 +81,42 @@ export default {
           :tag-display-limit="1"
         />
       </div>
-
-      <div class="d-flex text-secondary text-truncate mt-md-2">
+    </template>
+    <template #left-secondary>
+      <div class="gl-display-flex">
         <span>{{ packageEntity.version }}</span>
 
-        <div v-if="hasPipeline" class="d-none d-md-inline-block ml-1">
+        <div v-if="hasPipeline" class="gl-display-none gl-display-sm-flex gl-ml-2">
           <gl-sprintf :message="s__('PackageRegistry|published by %{author}')">
             <template #author>{{ packageEntity.pipeline.user.name }}</template>
           </gl-sprintf>
         </div>
 
-        <div v-if="hasProjectLink" class="d-flex align-items-center">
-          <gl-icon name="review-list" class="text-secondary ml-2 mr-1" />
+        <div v-if="hasProjectLink" class="gl-display-flex gl-align-items-center">
+          <gl-icon name="review-list" class="gl-ml-3 gl-mr-2 gl-min-w-0" />
 
           <gl-link
+            class="gl-text-body gl-min-w-0"
             data-testid="packages-row-project"
             :href="`/${packageEntity.project_path}`"
-            class="text-secondary"
-            >{{ packageEntity.projectPathName }}</gl-link
           >
+            <gl-truncate :text="packageEntity.projectPathName" />
+          </gl-link>
         </div>
 
         <div v-if="showPackageType" class="d-flex align-items-center" data-testid="package-type">
-          <gl-icon name="package" class="text-secondary ml-2 mr-1" />
+          <gl-icon name="package" class="gl-ml-3 gl-mr-2" />
           <span>{{ packageType }}</span>
         </div>
       </div>
-    </div>
+    </template>
 
-    <div
-      class="table-section d-flex flex-md-column justify-content-between align-items-md-end"
-      :class="disableDelete ? 'section-50' : 'section-40'"
-    >
+    <template #right-primary>
       <publish-method :package-entity="packageEntity" :is-group="isGroup" />
+    </template>
 
-      <div class="text-secondary order-0 order-md-1 mt-md-2">
+    <template #right-secondary>
+      <span>
         <gl-sprintf :message="__('Created %{timestamp}')">
           <template #timestamp>
             <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
@@ -120,10 +124,10 @@ export default {
             </span>
           </template>
         </gl-sprintf>
-      </div>
-    </div>
+      </span>
+    </template>
 
-    <div v-if="!disableDelete" class="table-section section-10 d-flex justify-content-end">
+    <template v-if="!disableDelete" #right-action>
       <gl-button
         data-testid="action-delete"
         icon="remove"
@@ -134,6 +138,6 @@ export default {
         :disabled="!packageEntity._links.delete_api_path"
         @click="$emit('packageToDelete', packageEntity)"
       />
-    </div>
-  </div>
+    </template>
+  </list-item>
 </template>