diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 11896a75798ecc6f3b25a6cb695198ea92fe0e80..1e01da795e877ce6fadda74a0f7bd500e99d6d50 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -40,9 +40,12 @@ export default class SingleFileDiff {
       this.$chevronDownIcon.removeClass('gl-display-none');
     }
 
-    $('.js-file-title, .click-to-expand', this.file).on('click', (e) => {
+    $('.js-file-title', this.file).on('click', (e) => {
       this.toggleDiff($(e.target));
     });
+    $('.click-to-expand', this.file).on('click', (e) => {
+      this.toggleDiff($(e.currentTarget));
+    });
   }
 
   toggleDiff($target, cb) {
diff --git a/app/views/projects/diffs/viewers/_collapsed.html.haml b/app/views/projects/diffs/viewers/_collapsed.html.haml
index 578b0af32417a8cb3fc543120db2a2c9cae6d9b3..6cffae440842b87e4c8849b7144bcfea636df504 100644
--- a/app/views/projects/diffs/viewers/_collapsed.html.haml
+++ b/app/views/projects/diffs/viewers/_collapsed.html.haml
@@ -1,3 +1,4 @@
 .nothing-here-block.diff-collapsed{ data: { diff_for_path: collapsed_diff_url(viewer.diff_file) } }
   = _("This diff is collapsed.")
-  %button.click-to-expand.gl-button.btn.btn-link= _("Click to expand it.")
+  = render Pajamas::ButtonComponent.new(variant: :link, button_options: { class: 'click-to-expand' }) do
+    = _("Click to expand it.")