1 files changed, 19 insertions, 6 deletions

diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 8a051041fbe..8f86fd55d6e 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -151,11 +151,24 @@ export const isMetaKey = (e) => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey
 // 3) Middle-click or Mouse Wheel Click (e.which is 2)
 export const isMetaClick = (e) => e.metaKey || e.ctrlKey || e.which === 2;
 
+/**
+ * Get the current computed outer height for given selector.
+ */
+export const getOuterHeight = (selector) => {
+  const element = document.querySelector(selector);
+
+  if (!element) {
+    return undefined;
+  }
+
+  return element.offsetHeight;
+};
+
 export const contentTop = () => {
   const isDesktop = breakpointInstance.isDesktop();
   const heightCalculators = [
-    () => $('#js-peek').outerHeight(),
-    () => $('.navbar-gitlab').outerHeight(),
+    () => getOuterHeight('#js-peek'),
+    () => getOuterHeight('.navbar-gitlab'),
     ({ desktop }) => {
       const container = document.querySelector('.line-resolve-all-container');
       let size = 0;
@@ -166,14 +179,14 @@ export const contentTop = () => {
 
       return size;
     },
-    () => $('.merge-request-tabs').outerHeight(),
-    () => $('.js-diff-files-changed').outerHeight(),
+    () => getOuterHeight('.merge-request-tabs'),
+    () => getOuterHeight('.js-diff-files-changed'),
     ({ desktop }) => {
       const diffsTabIsActive = window.mrTabs?.currentAction === 'diffs';
       let size;
 
       if (desktop && diffsTabIsActive) {
-        size = $('.diff-file .file-title-flex-parent:visible').outerHeight();
+        size = getOuterHeight('.diff-file .file-title-flex-parent:not([style="display:none"])');
       }
 
       return size;
@@ -182,7 +195,7 @@ export const contentTop = () => {
       let size;
 
       if (desktop) {
-        size = $('.mr-version-controls').outerHeight();
+        size = getOuterHeight('.mr-version-controls');
       }
 
       return size;