fixed alignment with icons

fixed icon not showing correctly in tab

app/assets/javascripts/ide/components/changed_file_icon.vue

@@ -34,11 +34,11 @@ export default {
       const type = this.file.tempFile ? 'addition' : 'modification';
 
       if (this.file.changed && !this.file.staged) {
-        return `unstaged ${type}`;
+        return `Unstaged ${type}`;
       } else if (!this.file.changed && this.file.staged) {
-        return `staged ${type}`;
+        return `Staged ${type}`;
       } else if (this.file.changed && this.file.staged) {
-        return `unstaged and staged ${pluralize(type)}`;
+        return `Unstaged and staged ${pluralize(type)}`;
       }
 
       return undefined;

app/assets/javascripts/ide/components/repo_tab.vue

 <script>
-  import { mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 
-  import fileIcon from '~/vue_shared/components/file_icon.vue';
-  import icon from '~/vue_shared/components/icon.vue';
-  import fileStatusIcon from './repo_file_status_icon.vue';
-  import changedFileIcon from './changed_file_icon.vue';
+import fileIcon from '~/vue_shared/components/file_icon.vue';
+import icon from '~/vue_shared/components/icon.vue';
+import fileStatusIcon from './repo_file_status_icon.vue';
+import changedFileIcon from './changed_file_icon.vue';
 
-  export default {
+export default {
   components: {
     fileStatusIcon,
     fileIcon,
@@ -26,35 +26,36 @@
   },
   computed: {
     closeLabel() {
-        if (this.tab.changed || this.tab.tempFile) {
+      if (this.fileHasChanged) {
         return `${this.tab.name} changed`;
       }
       return `Close ${this.tab.name}`;
     },
     showChangedIcon() {
-        return this.tab.changed ? !this.tabMouseOver : false;
+      return this.fileHasChanged ? !this.tabMouseOver : false;
+    },
+    fileHasChanged() {
+      return this.tab.changed || this.tab.tempFile || this.tab.staged;
     },
   },
 
   methods: {
-      ...mapActions([
-        'closeFile',
-      ]),
+    ...mapActions(['closeFile']),
     clickFile(tab) {
       this.$router.push(`/project${tab.url}`);
     },
     mouseOverTab() {
-        if (this.tab.changed) {
+      if (this.fileHasChanged) {
         this.tabMouseOver = true;
       }
     },
     mouseOutTab() {
-        if (this.tab.changed) {
+      if (this.fileHasChanged) {
         this.tabMouseOver = false;
       }
     },
   },
-  };
+};
 </script>
 
 <template>

app/assets/stylesheets/pages/repo.scss

@@ -498,6 +498,7 @@
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
+  padding-left: $grid-size;
 
   svg {
     margin-right: $gl-btn-padding;
@@ -770,6 +771,7 @@
 
   &:not(.is-collapsed) {
     flex: 1;
+    min-height: 140px;
   }
 }