1 files changed, 5 insertions, 9 deletions
diff --git a/app/assets/javascripts/vue_shared/components/file_row_header.vue b/app/assets/javascripts/vue_shared/components/file_row_header.vue
index 2c3e2a3a433..5afb2408c7e 100644
--- a/app/assets/javascripts/vue_shared/components/file_row_header.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row_header.vue
@@ -1,25 +1,21 @@
 <script>
-import { truncatePathMiddleToLength } from '~/lib/utils/text_utility';
-
-const MAX_PATH_LENGTH = 40;
+import { GlTruncate } from '@gitlab/ui';
 
 export default {
+  components: {
+    GlTruncate,
+  },
   props: {
     path: {
       type: String,
       required: true,
     },
   },
-  computed: {
-    truncatedPath() {
-      return truncatePathMiddleToLength(this.path, MAX_PATH_LENGTH);
-    },
-  },
 };
 </script>
 
 <template>
   <div class="file-row-header bg-white sticky-top p-2 js-file-row-header" :title="path">
-    <span class="bold">{{ truncatedPath }}</span>
+    <gl-truncate :text="path" position="middle" class="bold" />
   </div>
 </template>