Fixed paths in MR sidebar truncating incorrectly

This fixes a bug where long paths would actually just get
truncated into a long path of ellipsis', instead of including
any part of the path name.

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/25973

app/assets/javascripts/vue_shared/components/file_row_header.vue

 <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>

changelogs/unreleased/ph-25973-mergeRequestSidebarLongPathTruncating.yml

+---
+title: Fixed long paths truncating in merge request sidebar incorrectly
+merge_request:
+author:
+type: fixed