diff --git a/app/assets/javascripts/diffs/components/tree_list_height.vue b/app/assets/javascripts/diffs/components/tree_list_height.vue
index 4da94cacd75d90d17ca317780f0d86478aca48f7..816dbf56e76e9f93c91140c8f494ce7e233b6bd4 100644
--- a/app/assets/javascripts/diffs/components/tree_list_height.vue
+++ b/app/assets/javascripts/diffs/components/tree_list_height.vue
@@ -64,6 +64,7 @@ export default {
 
     window.addEventListener('resize', this.debouncedHeightCalc, { passive: true });
     window.addEventListener('scroll', this.debouncedRecordScroll, { passive: true });
+    window.mrTabs.eventHub.$on('MergeRequestTabChange', this.onTabChange);
 
     this.calculateScrollerHeight();
   },
@@ -72,6 +73,7 @@ export default {
     this.mediaQueryMatch = null;
     window.removeEventListener('resize', this.debouncedHeightCalc, { passive: true });
     window.removeEventListener('scroll', this.debouncedRecordScroll, { passive: true });
+    window.mrTabs.eventHub.$off('MergeRequestTabChange', this.onTabChange);
   },
   methods: {
     recordScroll() {
@@ -97,6 +99,10 @@ export default {
         this.scrollerHeight = window.innerHeight - y - reviewBarOffset - BOTTOM_OFFSET;
       }
     },
+    onTabChange(currentTab) {
+      if (currentTab !== 'diffs') return;
+      this.debouncedHeightCalc();
+    },
   },
 };
 </script>
diff --git a/spec/frontend_integration/diffs/diffs_interopability_spec.js b/spec/frontend_integration/diffs/diffs_interopability_spec.js
index c5bd77adf8fefef8ec0720bcf2875cccd63fbed4..470419e9f877ea00f7b1473e428d1643c66b159f 100644
--- a/spec/frontend_integration/diffs/diffs_interopability_spec.js
+++ b/spec/frontend_integration/diffs/diffs_interopability_spec.js
@@ -77,6 +77,7 @@ const startDiffsApp = () => {
     getCurrentAction: () => 'diffs',
     eventHub: {
       $on() {},
+      $off() {},
     },
   };
   const store = createStore();