diff --git a/app/assets/javascripts/repository/commits_service.js b/app/assets/javascripts/repository/commits_service.js
index 7f177da3ddded8ffed1f9b8e6f8d64a2930655f5..5fd9cfd4e53afd7e3a54bebfef5c43c2d73ad4cb 100644
--- a/app/assets/javascripts/repository/commits_service.js
+++ b/app/assets/javascripts/repository/commits_service.js
@@ -35,7 +35,7 @@ const fetchData = (projectPath, path, ref, offset) => {
     gon.relative_url_root || '/',
     projectPath,
     '/-/refs/',
-    encodeURIComponent(ref),
+    ref,
     '/logs_tree/',
     encodeURIComponent(removeLeadingSlash(path)),
   );
diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index 8faac62d4bbfa6b0e491f71808871b806625aecd..41f7a4b147f678d3ba0b928cd916b2acd9d53dbe 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -2,7 +2,6 @@
 import { GlSkeletonLoader, GlButton } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { sprintf, __ } from '~/locale';
-import { cleanLeadingSeparator } from '~/lib/utils/url_utility';
 import getRefMixin from '../../mixins/get_ref';
 import projectPathQuery from '../../queries/project_path.query.graphql';
 import TableHeader from './header.vue';
@@ -104,14 +103,13 @@ export default {
 
       return this.rowNumbers[key];
     },
-    getCommit(flatPath, type) {
+    getCommit(fileName, type) {
       if (!this.glFeatures.lazyLoadCommits) {
         return {};
       }
 
       return this.commits.find(
-        (commitEntry) =>
-          cleanLeadingSeparator(commitEntry.filePath) === flatPath && commitEntry.type === type,
+        (commitEntry) => commitEntry.fileName === fileName && commitEntry.type === type,
       );
     },
   },
@@ -154,7 +152,7 @@ export default {
               :loading-path="loadingPath"
               :total-entries="totalEntries"
               :row-number="generateRowNumber(entry.flatPath, entry.id, index)"
-              :commit-info="getCommit(entry.flatPath, entry.type)"
+              :commit-info="getCommit(entry.name, entry.type)"
               v-on="$listeners"
             />
           </template>
diff --git a/spec/frontend/repository/commits_service_spec.js b/spec/frontend/repository/commits_service_spec.js
index 71255d1d6e9c641203d7d3e6a6837a040dcd0f77..697fa7c4fd1c05616e8b752969a2df66b02c7c08 100644
--- a/spec/frontend/repository/commits_service_spec.js
+++ b/spec/frontend/repository/commits_service_spec.js
@@ -39,11 +39,10 @@ describe('commits service', () => {
     expect(axios.get).toHaveBeenCalledWith(testUrl, { params: { format: 'json', offset } });
   });
 
-  it('encodes the path and ref correctly', async () => {
-    await requestCommits(1, 'some-project', 'with $peci@l ch@rs/', 'r€f-#');
+  it('encodes the path correctly', async () => {
+    await requestCommits(1, 'some-project', 'with $peci@l ch@rs/');
 
-    const encodedUrl =
-      '/some-project/-/refs/r%E2%82%ACf-%23/logs_tree/with%20%24peci%40l%20ch%40rs%2F';
+    const encodedUrl = '/some-project/-/refs/main/logs_tree/with%20%24peci%40l%20ch%40rs%2F';
     expect(axios.get).toHaveBeenCalledWith(encodedUrl, expect.anything());
   });
 
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
index 36adf3aea03ece87c8480f0d1fdd002c5a8e318c..ff0371b5c077c8e7af55916427d330fdc563a679 100644
--- a/spec/frontend/repository/components/table/index_spec.js
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -11,7 +11,7 @@ const MOCK_BLOBS = [
   {
     id: '123abc',
     sha: '123abc',
-    flatPath: 'main/blob.md',
+    flatPath: 'blob',
     name: 'blob.md',
     type: 'blob',
     webPath: '/blob',
@@ -19,7 +19,7 @@ const MOCK_BLOBS = [
   {
     id: '124abc',
     sha: '124abc',
-    flatPath: 'main/blob2.md',
+    flatPath: 'blob2',
     name: 'blob2.md',
     type: 'blob',
     webUrl: 'http://test.com',
@@ -27,7 +27,7 @@ const MOCK_BLOBS = [
   {
     id: '125abc',
     sha: '125abc',
-    flatPath: 'main/blob3.md',
+    flatPath: 'blob3',
     name: 'blob3.md',
     type: 'blob',
     webUrl: 'http://test.com',
@@ -37,21 +37,21 @@ const MOCK_BLOBS = [
 
 const MOCK_COMMITS = [
   {
-    filePath: 'main/blob.md',
+    fileName: 'blob.md',
     type: 'blob',
     commit: {
       message: 'Updated blob.md',
     },
   },
   {
-    filePath: 'main/blob2.md',
+    fileName: 'blob2.md',
     type: 'blob',
     commit: {
       message: 'Updated blob2.md',
     },
   },
   {
-    filePath: 'main/blob3.md',
+    fileName: 'blob3.md',
     type: 'blob',
     commit: {
       message: 'Updated blob3.md',