diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 1176ca25b7b7ffe615bade91fd2e716be3bc5add..fba1d1af7cd96076f0c6ce9a8270c5f9cb62c2ba 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -112,7 +112,11 @@ export default {
   },
   methods: {
     handleToggle(e, checkTarget) {
-      if (!checkTarget || e.target === this.$refs.header) {
+      if (
+        !checkTarget ||
+        e.target === this.$refs.header ||
+        (e.target.classList && e.target.classList.contains('diff-toggle-caret'))
+      ) {
         this.$emit('toggleFile');
       }
     },
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 8c25d177813468af0870f11ea4b0caf6fa7b6b26..a90a9c6e486f0fc26c6231dbf24d11b1238764e7 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -14,8 +14,8 @@
       background-color: $gray-normal;
     }
 
-    .diff-toggle-caret {
-      padding-right: 6px;
+    svg {
+      vertical-align: text-bottom;
     }
   }