diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index fe5289ff371..f49e69c473b 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -146,6 +146,7 @@ export default {
         <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
           <file-icon
             v-if="!showChangedIcon || file.type === 'tree'"
+            class="file-row-icon"
             :file-name="file.name"
             :loading="file.loading"
             :folder="isTree"
@@ -223,13 +224,8 @@ export default {
   white-space: nowrap;
 }
 
-.file-row-name svg {
+.file-row-name .file-row-icon {
   margin-right: 2px;
   vertical-align: middle;
 }
-
-.file-row-name .loading-container {
-  display: inline-block;
-  margin-right: 4px;
-}
 </style>
diff --git a/changelogs/unreleased/fix-file-row-styling.yml b/changelogs/unreleased/fix-file-row-styling.yml
new file mode 100644
index 00000000000..a4427fdd48f
--- /dev/null
+++ b/changelogs/unreleased/fix-file-row-styling.yml
@@ -0,0 +1,5 @@
+---
+title: Fix loading icon causing text to jump in file row of Web IDE
+merge_request: 31884
+author:
+type: fixed