1 files changed, 17 insertions, 9 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 2ecf9af4bf0..5cda7967130 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
+import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import StageButton from './stage_button.vue';
 import UnstageButton from './unstage_button.vue';
@@ -11,6 +12,9 @@ export default {
     StageButton,
     UnstageButton,
   },
+  directives: {
+    tooltip,
+  },
   props: {
     file: {
       type: Object,
@@ -50,6 +54,9 @@ export default {
     isActive() {
       return this.activeFileKey === this.fullKey;
     },
+    tooltipTitle() {
+      return this.file.path === this.file.name ? '' : this.file.path;
+    },
   },
   methods: {
     ...mapActions([
@@ -81,29 +88,30 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="{
-      'is-active': isActive
-    }"
-    class="multi-file-commit-list-item"
-  >
+  <div class="multi-file-commit-list-item position-relative">
     <button
+      v-tooltip
+      :title="tooltipTitle"
+      :class="{
+        'is-active': isActive
+      }"
       type="button"
-      class="multi-file-commit-list-path"
+      class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
       @dblclick="fileAction"
       @click="openFileInEditor"
     >
-      <span class="multi-file-commit-list-file-path">
+      <span class="multi-file-commit-list-file-path d-flex align-items-center">
         <icon
           :name="iconName"
           :size="16"
           :css-classes="iconClass"
-        />{{ file.path }}
+        />{{ file.name }}
       </span>
     </button>
     <component
       :is="actionComponent"
       :path="file.path"
+      class="d-flex position-absolute"
     />
   </div>
 </template>