Merge pull request #21120 from overleaf/dp-overview-entry-gap

Adjust size of gap between review panel entries to 4px

GitOrigin-RevId: a09a6fde0e8eb15e0c753e436a1c09434581d6d8

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'

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;

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