diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 9f35c9bba61..c686785dfcf 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -5,6 +5,7 @@ import {
   GlLink,
   GlSkeletonLoader,
   GlTooltipDirective,
+  GlTruncate,
   GlLoadingIcon,
   GlIcon,
   GlHoverLoadDirective,
@@ -28,6 +29,7 @@ export default {
     GlSkeletonLoader,
     GlLoadingIcon,
     GlIcon,
+    GlTruncate,
     TimeagoTooltip,
     FileIcon,
     GlIntersectionObserver,
@@ -207,7 +209,7 @@ export default {
 
 <template>
   <tr class="tree-item">
-    <td class="tree-item-file-name cursor-default position-relative">
+    <td class="tree-item-file-name gl-relative gl-flex gl-cursor-default gl-gap-2">
       <component
         :is="linkComponent"
         ref="link"
@@ -218,7 +220,7 @@ export default {
         :class="{
           'is-submodule': isSubmodule,
         }"
-        class="tree-item-link str-truncated"
+        class="tree-item-link gl-inline-flex gl-min-w-0"
         data-testid="file-name-link"
       >
         <file-icon
@@ -227,12 +229,17 @@ export default {
           :folder="isFolder"
           :submodule="isSubmodule"
           :loading="path === loadingPath"
-          css-classes="position-relative file-icon"
-          class="gl-relative gl-mr-2 gl-text-subtle"
-        /><span class="gl-relative">{{ fullPath }}</span>
+          css-classes="gl-relative file-icon"
+          class="gl-relative gl-mr-2 gl-text-secondary"
+        /><gl-truncate
+          :text="fullPath"
+          position="end"
+          class="gl-min-w-0 gl-grow hover:gl-underline"
+          with-tooltip
+        />
       </component>
       <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
-      <gl-badge v-if="lfsOid" variant="muted" class="gl-ml-2" data-testid="label-lfs">LFS</gl-badge>
+      <gl-badge v-if="lfsOid" variant="muted" data-testid="label-lfs">LFS</gl-badge>
       <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
@@ -243,7 +250,6 @@ export default {
         :title="commitData.lockLabel"
         name="lock"
         :size="12"
-        class="gl-ml-2"
       />
     </td>
     <td class="tree-commit cursor-default gl-hidden sm:gl-table-cell">
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 62e666e9d6f..88b39b83fcd 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -51458,9 +51458,6 @@ msgstr ""
 msgid "SecurityOrchestration|more than %{allowed}"
 msgstr ""
 
-msgid "SecurityOrchestration|or from:"
-msgstr ""
-
 msgid "SecurityOrchestration|projects with compliance frameworks"
 msgstr ""
 
diff --git a/spec/features/projects/files/files_sort_submodules_with_folders_spec.rb b/spec/features/projects/files/files_sort_submodules_with_folders_spec.rb
index 124f6d43894..6cf542abaf5 100644
--- a/spec/features/projects/files/files_sort_submodules_with_folders_spec.rb
+++ b/spec/features/projects/files/files_sort_submodules_with_folders_spec.rb
@@ -18,7 +18,7 @@ RSpec.describe 'Projects > Files > User views files page', feature_category: :so
     folders = tree.trees.map(&:name)
     files = tree.blobs.map(&:name)
     submodules = tree.submodules.map do |submodule|
-      submodule.name + " @ " + submodule.id[0..7]
+      "#{submodule.name}\n@\n#{submodule.id[0..7]}"
     end
 
     sorted_titles = (folders + submodules).sort + files
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index 9536bdc7b59..016199a5d16 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -5,29 +5,29 @@ exports[`Repository table row component renders a symlink table row 1`] = `
   class="tree-item"
 >
   <td
-    class="cursor-default position-relative tree-item-file-name"
+    class="gl-cursor-default gl-flex gl-gap-2 gl-relative tree-item-file-name"
   >
     <a
-      class="str-truncated tree-item-link"
+      class="gl-inline-flex gl-min-w-0 tree-item-link"
       data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
       <file-icon-stub
-        class="gl-mr-2 gl-relative gl-text-subtle"
-        cssclasses="position-relative file-icon"
+        class="gl-mr-2 gl-relative gl-text-secondary"
+        cssclasses="gl-relative file-icon"
         filemode="120000"
         filename="test"
         size="16"
       />
-      <span
-        class="gl-relative"
-      >
-        test
-      </span>
+      <gl-truncate-stub
+        class="gl-grow gl-min-w-0 hover:gl-underline"
+        position="end"
+        text="test"
+        withtooltip="true"
+      />
     </a>
     <gl-icon-stub
-      class="gl-ml-2"
       name="lock"
       size="12"
       title="Locked by Root"
@@ -62,29 +62,29 @@ exports[`Repository table row component renders table row 1`] = `
   class="tree-item"
 >
   <td
-    class="cursor-default position-relative tree-item-file-name"
+    class="gl-cursor-default gl-flex gl-gap-2 gl-relative tree-item-file-name"
   >
     <a
-      class="str-truncated tree-item-link"
+      class="gl-inline-flex gl-min-w-0 tree-item-link"
       data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
       <file-icon-stub
-        class="gl-mr-2 gl-relative gl-text-subtle"
-        cssclasses="position-relative file-icon"
+        class="gl-mr-2 gl-relative gl-text-secondary"
+        cssclasses="gl-relative file-icon"
         filemode=""
         filename="test"
         size="16"
       />
-      <span
-        class="gl-relative"
-      >
-        test
-      </span>
+      <gl-truncate-stub
+        class="gl-grow gl-min-w-0 hover:gl-underline"
+        position="end"
+        text="test"
+        withtooltip="true"
+      />
     </a>
     <gl-icon-stub
-      class="gl-ml-2"
       name="lock"
       size="12"
       title="Locked by Root"
@@ -119,29 +119,29 @@ exports[`Repository table row component renders table row for path with special
   class="tree-item"
 >
   <td
-    class="cursor-default position-relative tree-item-file-name"
+    class="gl-cursor-default gl-flex gl-gap-2 gl-relative tree-item-file-name"
   >
     <a
-      class="str-truncated tree-item-link"
+      class="gl-inline-flex gl-min-w-0 tree-item-link"
       data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
       <file-icon-stub
-        class="gl-mr-2 gl-relative gl-text-subtle"
-        cssclasses="position-relative file-icon"
+        class="gl-mr-2 gl-relative gl-text-secondary"
+        cssclasses="gl-relative file-icon"
         filemode=""
         filename="test"
         size="16"
       />
-      <span
-        class="gl-relative"
-      >
-        test
-      </span>
+      <gl-truncate-stub
+        class="gl-grow gl-min-w-0 hover:gl-underline"
+        position="end"
+        text="test"
+        withtooltip="true"
+      />
     </a>
     <gl-icon-stub
-      class="gl-ml-2"
       name="lock"
       size="12"
       title="Locked by Root"