From efa376f4f422c5a110997e82fd03a0b3fa255c51 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:54:49 +0100
Subject: [PATCH] Merge pull request #21120 from overleaf/dp-overview-entry-gap

Adjust size of gap between review panel entries to 4px

GitOrigin-RevId: a09a6fde0e8eb15e0c753e436a1c09434581d6d8
---
 .../js/features/review-panel-new/utils/position-items.ts     | 5 +++--
 .../frontend/stylesheets/app/editor/review-panel-new.less    | 3 +++
 .../bootstrap-5/pages/editor/review-panel-new.scss           | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/utils/position-items.ts b/services/web/frontend/js/features/review-panel-new/utils/position-items.ts
index 26eda378a3..7982312f04 100644
--- a/services/web/frontend/js/features/review-panel-new/utils/position-items.ts
+++ b/services/web/frontend/js/features/review-panel-new/utils/position-items.ts
@@ -2,6 +2,7 @@ import { debounce } from 'lodash'
 
 const COLLAPSED_HEADER_HEIGHT = 75
 const OFFSET_FOR_ENTRIES_ABOVE = 70
+const GAP_BETWEEN_ENTRIES = 4
 
 export const positionItems = debounce(
   (
@@ -62,7 +63,7 @@ export const positionItems = debounce(
       let top = getTopPosition(item, i === 0)
       const bottom = top + rect.height
       if (bottom > topLimit) {
-        top = topLimit - rect.height - 10
+        top = topLimit - rect.height - GAP_BETWEEN_ENTRIES
       }
       item.style.top = `${top}px`
       item.style.visibility = 'visible'
@@ -76,7 +77,7 @@ export const positionItems = debounce(
       const rect = item.getBoundingClientRect()
       let top = getTopPosition(item, false)
       if (top < bottomLimit) {
-        top = bottomLimit + 10
+        top = bottomLimit + GAP_BETWEEN_ENTRIES
       }
       item.style.top = `${top}px`
       item.style.visibility = 'visible'
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 07fc91a8af..04673784bb 100644
--- a/services/web/frontend/stylesheets/app/editor/review-panel-new.less
+++ b/services/web/frontend/stylesheets/app/editor/review-panel-new.less
@@ -448,6 +448,9 @@
   }
 
   .review-panel-overview-file-entries {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
     overflow: hidden;
     padding-top: 4px;
     padding-bottom: 6px;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
index fd5ff147b7..8061c991d7 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
@@ -461,6 +461,9 @@
   }
 
   .review-panel-overview-file-entries {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-02);
     overflow: hidden;
     padding-top: var(--spacing-02);
     padding-bottom: var(--spacing-03);