Merge pull request #20405 from overleaf/dp-fix-empty-state-position

Fix positioning of review panel empty state

GitOrigin-RevId: d1c93e1a8bef59ad68e9f3e62106a949b7f9efdd

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)}
-            />
-          )
-      )}
-
-      {aggregatedRanges.comments.map(
-        comment =>
-          positions.has(comment.id) && (
-            <ReviewPanelComment
-              key={comment.id}
-              comment={comment}
-              top={positions.get(comment.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}
             />
           )
-      )}
-    </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>
+    </>
   )
 }
 

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;
   }