From 7a685a0207efba3fa0f2843f6fb58ce6c762fdc8 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Thu, 27 Jul 2023 10:54:09 +0100
Subject: [PATCH] Merge pull request #14046 from
 overleaf/td-review-panel-scrolled-down-layout

React review panel: fix bug that prevented entries appearing when editor starts off scrolled down

GitOrigin-RevId: 61c5b5523e82cf5334c4de30d6849f45d5bc321a
---
 .../review-panel/positioned-entries.tsx       | 19 +++++++++++++++++--
 .../extensions/changes/change-manager.ts      |  2 ++
 .../stylesheets/app/editor/review-panel.less  |  1 +
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/components/review-panel/positioned-entries.tsx b/services/web/frontend/js/features/source-editor/components/review-panel/positioned-entries.tsx
index 778ac9ae01..eb3d42ee55 100644
--- a/services/web/frontend/js/features/source-editor/components/review-panel/positioned-entries.tsx
+++ b/services/web/frontend/js/features/source-editor/components/review-panel/positioned-entries.tsx
@@ -204,17 +204,32 @@ function PositionedEntries({
       }
     }
 
-    // Calculate positions for all visible entries
+    // Calculate positions for all visible entries, starting by calculating the
+    // entry to put in its desired position and anchor everything else around.
+    // If there is an explicitly focused entry, use that.
     let focusedEntryIndex = entryViews.findIndex(view => view.entry.focused)
     if (focusedEntryIndex === -1) {
+      // There is no explicitly focused entry, so use the focused entry from the
+      // previous layout. This will be the first entry in the list if there was
+      // no previous layout.
       focusedEntryIndex = Math.min(
         previousLayoutInfoRef.current.focusedEntryIndex,
         entryViews.length - 1
       )
+      // If the entry from the previous layout is not visible, fall back to the
+      // first visible entry in the list
+      if (!entryViews[focusedEntryIndex].visible) {
+        focusedEntryIndex = entryViews.findIndex(view => view.visible)
+      }
+    }
+
+    // If there is no visible entry, bail out
+    if (focusedEntryIndex === -1) {
+      return
     }
 
     const focusedEntryView = entryViews[focusedEntryIndex]
-    if (!focusedEntryView.entry.screenPos) {
+    if (!focusedEntryView.visible) {
       return
     }
 
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 f261060312..430211fd65 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
@@ -88,6 +88,8 @@ export const createChangeManager = (
         }
 
         entry.screenPos = { y: y + offsetTop, height, editorPaddingTop }
+      } else {
+        entry.screenPos = null
       }
 
       if (allVisible) {
diff --git a/services/web/frontend/stylesheets/app/editor/review-panel.less b/services/web/frontend/stylesheets/app/editor/review-panel.less
index 892cc58b8c..5066f07834 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel.less
@@ -1276,6 +1276,7 @@ button when (@is-overleaf-light = true) {
 
   .rp-entry-list-react {
     position: relative;
+    overflow-x: hidden;
   }
 
   .rp-state-current-file & {