From 8f8cb03e98d59eea8c1cb398c81c71f0924eedb3 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Tue, 18 Jul 2023 11:34:49 +0100
Subject: [PATCH] [cm6] Add offset to review panel entry positions when needed
 (#13912)

* Add offset to review panel entry positions when needed
* Fix useResizeObserver usage

GitOrigin-RevId: e220ce94e13c3a2347fc72654de747356eb1e658
---
 .../source-editor/components/review-panel/nav.tsx         | 4 ++--
 .../components/review-panel/toolbar/toolbar.tsx           | 4 ++--
 .../source-editor/extensions/changes/change-manager.ts    | 8 +++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx
index 1062a1a36b..603fdeb6ff 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/nav.tsx
@@ -24,10 +24,10 @@ function Nav() {
     },
     [setNavHeight]
   )
-  const resizeRef = useResizeObserver(handleResize)
+  const { elementRef } = useResizeObserver(handleResize)
 
   return (
-    <div ref={resizeRef} className="rp-nav" role="tablist">
+    <div ref={elementRef} className="rp-nav" role="tablist">
       <button
         type="button"
         id="review-panel-tab-current-file"
diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toolbar.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toolbar.tsx
index eed5f54cce..58aa0a0016 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toolbar.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/toolbar/toolbar.tsx
@@ -17,10 +17,10 @@ function Toolbar() {
     },
     [setToolbarHeight]
   )
-  const resizeRef = useResizeObserver(handleResize)
+  const { elementRef } = useResizeObserver(handleResize)
 
   return (
-    <div ref={resizeRef} className="review-panel-toolbar">
+    <div ref={elementRef} className="review-panel-toolbar">
       <ResolvedCommentsDropdown />
       <ToggleMenu />
     </div>
diff --git a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
index 1652633804..9e991a7dba 100644
--- a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts
@@ -10,6 +10,12 @@ import { EditorView, ViewUpdate } from '@codemirror/view'
 import { CurrentDoc } from '../../../../../../types/current-doc'
 import { fullHeightCoordsAtPos } from '../../utils/layer'
 import { debounce } from 'lodash'
+import getMeta from '../../../../utils/meta'
+
+// If a toolbar row sits alongside the review panel, the review panel entries need to be shifted down by 32px.
+// Once the review panel is always inside the editor, this offset can be removed.
+const offsetTop =
+  getMeta('ol-showSourceToolbar') && !getMeta('ol-isReviewPanelReact') ? 32 : 0
 
 // With less than this number of entries, don't bother culling to avoid
 // little UI jumps when scrolling.
@@ -79,7 +85,7 @@ export const createChangeManager = (
           visibilityChanged = true
         }
 
-        entry.screenPos = { y, height, editorPaddingTop }
+        entry.screenPos = { y: y + offsetTop, height, editorPaddingTop }
       }
 
       if (allVisible) {