[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

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"

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>

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) {