From 08a6caab806fd6469cb4e88de586eed433a2563b Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Thu, 19 Sep 2024 11:07:33 +0100
Subject: [PATCH] Merge pull request #20405 from
 overleaf/dp-fix-empty-state-position

Fix positioning of review panel empty state

GitOrigin-RevId: d1c93e1a8bef59ad68e9f3e62106a949b7f9efdd
---
 .../components/review-panel-current-file.tsx  | 70 ++++++++++---------
 .../app/editor/review-panel-new.less          |  5 +-
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
index ff8b658c51..9ab29e389f 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-panel-current-file.tsx
@@ -237,45 +237,47 @@ const ReviewPanelCurrentFile: FC = () => {
   }
 
   return (
-    <div ref={handleContainer}>
-      {addCommentEntries.map(entry => {
-        const { id, from, to, value, top } = entry
-        return (
-          <ReviewPanelAddComment
-            key={id}
-            from={from}
-            to={to}
-            value={value}
-            top={top}
-          />
-        )
-      })}
-
+    <>
       {showEmptyState && <ReviewPanelEmptyState />}
 
-      {aggregatedRanges.changes.map(
-        change =>
-          positions.has(change.id) && (
-            <ReviewPanelChange
-              key={change.id}
-              change={change}
-              top={positions.get(change.id)}
-              aggregate={aggregatedRanges.aggregates.get(change.id)}
+      <div ref={handleContainer}>
+        {addCommentEntries.map(entry => {
+          const { id, from, to, value, top } = entry
+          return (
+            <ReviewPanelAddComment
+              key={id}
+              from={from}
+              to={to}
+              value={value}
+              top={top}
             />
           )
-      )}
+        })}
 
-      {aggregatedRanges.comments.map(
-        comment =>
-          positions.has(comment.id) && (
-            <ReviewPanelComment
-              key={comment.id}
-              comment={comment}
-              top={positions.get(comment.id)}
-            />
-          )
-      )}
-    </div>
+        {aggregatedRanges.changes.map(
+          change =>
+            positions.has(change.id) && (
+              <ReviewPanelChange
+                key={change.id}
+                change={change}
+                top={positions.get(change.id)}
+                aggregate={aggregatedRanges.aggregates.get(change.id)}
+              />
+            )
+        )}
+
+        {aggregatedRanges.comments.map(
+          comment =>
+            positions.has(comment.id) && (
+              <ReviewPanelComment
+                key={comment.id}
+                comment={comment}
+                top={positions.get(comment.id)}
+              />
+            )
+        )}
+      </div>
+    </>
   )
 }
 
diff --git a/services/web/frontend/stylesheets/app/editor/review-panel-new.less b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
index 9c1645aa19..838d7234a1 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
@@ -350,11 +350,10 @@
   }
 
   .review-panel-empty-state {
-    position: absolute;
+    position: fixed;
+    width: var(--review-panel-width);
     top: 0;
     bottom: 0;
-    left: 0;
-    right: 0;
     pointer-events: none;
   }