Fix layout shift by nearly always applying overflow-y hidden on review panel (#8174)

* Always hide vertical overflow on the review panel, not just when it's expanded, which prevents it scrolling slightly when scrolling the PDF in some circumstances
* Fix layout shift by always applying overflow-y hidden on review panel and make entry visible in minimized review panel by making the overflow visible while hovering over the entry

GitOrigin-RevId: 854ee47a762ee2cf78fbbb5856afddb3b723d679

services/web/app/views/project/editor/review-panel.pug

@@ -1,4 +1,6 @@
-#review-panel
+#review-panel(
+	ng-class="{ 'rp-collapsed-displaying-entry': reviewPanel.entryHover }"
+)
 	.rp-in-editor-widgets
 		a.rp-track-changes-indicator(
 			href
@@ -125,6 +127,8 @@
 						on-reject="rejectChanges(entry.entry_ids);"
 						on-accept="acceptChanges(entry.entry_ids);"
 						on-indicator-click="toggleReviewPanel();"
+						on-mouse-enter="mouseEnterIndicator()"
+						on-mouse-leave="mouseLeaveIndicator()"
 						on-body-click="gotoEntry(editor.open_doc_id, entry)"
 						permissions="permissions"
 					)
@@ -136,6 +140,8 @@
 						on-reject="rejectChanges(entry.entry_ids);"
 						on-accept="acceptChanges(entry.entry_ids);"
 						on-indicator-click="toggleReviewPanel();"
+						on-mouse-enter="mouseEnterIndicator()"
+						on-mouse-leave="mouseLeaveIndicator()"
 						on-body-click="gotoEntry(editor.open_doc_id, entry)"
 						permissions="permissions"
 					)
@@ -147,6 +153,8 @@
 						on-resolve="resolveComment(entry, entry_id)"
 						on-reply="submitReply(entry, entry_id);"
 						on-indicator-click="toggleReviewPanel();"
+						on-mouse-enter="mouseEnterIndicator()"
+						on-mouse-leave="mouseLeaveIndicator()"
 						on-save-edit="saveEdit(entry.thread_id, comment)"
 						on-delete="deleteComment(entry.thread_id, comment)"
 						on-body-click="gotoEntry(editor.open_doc_id, entry)"
@@ -248,7 +256,10 @@
 
 
 script(type='text/ng-template', id='changeEntryTemplate')
-	div
+	div(
+		ng-mouseenter="onMouseEnter();"
+		ng-mouseleave="onMouseLeave();"
+	)
 		.rp-entry-callout(
 			ng-class="'rp-entry-callout-' + entry.type"
 		)
@@ -296,7 +307,10 @@ script(type='text/ng-template', id='changeEntryTemplate')
 					|  #{translate("accept")}
 
 script(type='text/ng-template', id='aggregateChangeEntryTemplate')
-	div
+	div(
+		ng-mouseenter="onMouseEnter();"
+		ng-mouseleave="onMouseLeave();"
+	)
 		.rp-entry-callout.rp-entry-callout-aggregate
 		.rp-entry-indicator(
 			ng-class="{ 'rp-entry-indicator-focused': entry.focused }"
@@ -343,6 +357,8 @@ script(type='text/ng-template', id='aggregateChangeEntryTemplate')
 script(type='text/ng-template', id='commentEntryTemplate')
 	.rp-comment-wrapper(
 		ng-class="{ 'rp-comment-wrapper-resolving': state.animating }"
+		ng-mouseenter="onMouseEnter();"
+		ng-mouseleave="onMouseLeave();"
 	)
 		.rp-entry-callout.rp-entry-callout-comment
 		.rp-entry-indicator(

services/web/frontend/js/ide/review-panel/controllers/ReviewPanelController.js

@@ -103,6 +103,7 @@ export default App.controller(
       // A count of user-facing selected changes. An aggregated change (insertion + deletion) will count
       // as only one.
       nVisibleSelectedChanges: 0,
+      entryHover: false,
     }
 
     window.addEventListener('beforeunload', function () {
@@ -642,6 +643,18 @@ export default App.controller(
       })
     }
 
+    // The next two functions control a class on the review panel that affects
+    // the overflow-y rule on the panel. This is necessary so that an entry in
+    // the review panel is visible when hovering over its indicator when the
+    // review panel is minimized. See issue #8057.
+    $scope.mouseEnterIndicator = function () {
+      $scope.reviewPanel.entryHover = true
+    }
+
+    $scope.mouseLeaveIndicator = function () {
+      $scope.reviewPanel.entryHover = false
+    }
+
     function _doAcceptChanges(change_ids) {
       $http.post(
         `/project/${$scope.project_id}/doc/${$scope.editor.open_doc_id}/changes/accept`,

services/web/frontend/js/ide/review-panel/directives/aggregateChangeEntry.js

@@ -21,6 +21,8 @@ export default App.directive('aggregateChangeEntry', $timeout => ({
     onAccept: '&',
     onReject: '&',
     onIndicatorClick: '&',
+    onMouseEnter: '&',
+    onMouseLeave: '&',
     onBodyClick: '&',
   },
   link(scope, element, attrs) {

services/web/frontend/js/ide/review-panel/directives/changeEntry.js

@@ -21,6 +21,8 @@ export default App.directive('changeEntry', $timeout => ({
     onAccept: '&',
     onReject: '&',
     onIndicatorClick: '&',
+    onMouseEnter: '&',
+    onMouseLeave: '&',
     onBodyClick: '&',
   },
   link(scope, element, attrs) {

services/web/frontend/js/ide/review-panel/directives/commentEntry.js

@@ -21,6 +21,8 @@ export default App.directive('commentEntry', $timeout => ({
     onResolve: '&',
     onReply: '&',
     onIndicatorClick: '&',
+    onMouseEnter: '&',
+    onMouseLeave: '&',
     onSaveEdit: '&',
     onDelete: '&',
     onBodyClick: '&',

services/web/frontend/stylesheets/app/editor/review-panel.less

@@ -188,10 +188,6 @@
     display: block;
   }
 
-  .rp-size-expanded & {
-    overflow-y: hidden;
-  }
-
   .rp-unsupported & {
     display: none;
   }
@@ -201,6 +197,11 @@
     top: 0;
     bottom: 0;
     padding-bottom: 52px;
+    overflow-y: hidden;
+  }
+
+  .rp-state-current-file.rp-size-mini .rp-collapsed-displaying-entry & {
+    overflow-y: visible;
   }
 
   .rp-state-overview & {