Merge pull request #15814 from overleaf/td-review-panel-indicator-hover

Fix review panel comment hover bug

GitOrigin-RevId: ddd6f8f073a2af189c990c8942a388cae412f8c6

services/web/frontend/js/features/source-editor/components/review-panel/entries/entry-container.tsx

@@ -1,6 +1,7 @@
-import classnames from 'classnames'
+import classNames from 'classnames'
 import { createPortal } from 'react-dom'
 import { Coordinates } from '../hooks/use-indicator-hover'
+import useScopeValue from '@/shared/hooks/use-scope-value'
 
 function EntryContainer({
   id,
@@ -10,9 +11,11 @@ function EntryContainer({
 }: React.ComponentProps<'div'> & {
   hoverCoords?: Coordinates | null
 }) {
+  const [layoutToLeft] = useScopeValue<boolean>('reviewPanel.layoutToLeft')
+
   const container = (
     <div
-      className={classnames('rp-entry-wrapper', className)}
+      className={classNames('rp-entry-wrapper', className)}
       data-entry-id={id}
       {...rest}
     />
@@ -22,7 +25,9 @@ function EntryContainer({
     // Render in a floating positioned container
     return createPortal(
       <div
-        className="rp-floating-entry"
+        className={classNames('rp-floating-entry', {
+          'rp-floating-entry-layout-left': layoutToLeft,
+        })}
         style={{ left: hoverCoords.x + 'px', top: hoverCoords.y + 'px' }}
       >
         {container}

services/web/frontend/js/features/source-editor/components/review-panel/hooks/use-indicator-hover.ts

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { useReviewPanelUpdaterFnsContext } from '../../../context/review-panel/review-panel-context'
 import { useLayoutContext } from '../../../../../shared/context/layout-context'
-import useScopeValue from '../../../../../shared/hooks/use-scope-value'
 import EntryIndicator from '../entries/entry-indicator'
 
 export type Coordinates = {
@@ -12,7 +11,6 @@ export type Coordinates = {
 
 function useIndicatorHover() {
   const [hoverCoords, setHoverCoords] = useState<Coordinates | null>(null)
-  const [layoutToLeft] = useScopeValue<boolean>('reviewPanel.layoutToLeft')
   const { toggleReviewPanel } = useReviewPanelUpdaterFnsContext()
   const { reviewPanelOpen } = useLayoutContext()
   const { setLayoutSuspended, handleLayoutChange } =
@@ -22,7 +20,7 @@ function useIndicatorHover() {
   )
 
   const endHover = useCallback(() => {
-    if (!reviewPanelOpen && !layoutToLeft) {
+    if (!reviewPanelOpen) {
       // Use flushSync to ensure that React renders immediately. This is
       // necessary to ensure that the subsequent layout update acts on the
       // updated DOM.
@@ -32,17 +30,15 @@ function useIndicatorHover() {
       })
       handleLayoutChange({ force: true })
     }
-  }, [handleLayoutChange, layoutToLeft, reviewPanelOpen, setLayoutSuspended])
+  }, [handleLayoutChange, reviewPanelOpen, setLayoutSuspended])
 
   const handleIndicatorMouseEnter = () => {
-    if (!layoutToLeft) {
-      const rect = indicatorRef.current?.getBoundingClientRect()
-      setHoverCoords({
-        x: rect?.left || 0,
-        y: rect?.top || 0,
-      })
-      setLayoutSuspended(true)
-    }
+    const rect = indicatorRef.current?.getBoundingClientRect()
+    setHoverCoords({
+      x: rect?.left || 0,
+      y: rect?.top || 0,
+    })
+    setLayoutSuspended(true)
   }
 
   const handleIndicatorClick = () => {

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

@@ -327,16 +327,14 @@
     top: 0;
   }
 
-  .rp-state-current-file-mini.rp-layout-left & {
-    left: auto;
-    right: @review-off-width + @rp-entry-arrow-width;
+  .rp-state-current-file-mini.rp-layout-left &,
+  .rp-floating-entry-layout-left & {
     border-left-width: 0;
     border-right-width: @rp-entry-ribbon-width;
     border-right-style: solid;
 
     &::before {
       left: -(@review-off-width + @rp-entry-arrow-width);
-      right: -(2 * @rp-entry-arrow-width + 2);
     }
 
     &::after {
@@ -351,6 +349,23 @@
     }
   }
 
+  .rp-state-current-file-mini.rp-layout-left & {
+    left: auto;
+    right: @review-off-width + @rp-entry-arrow-width;
+
+    &::before {
+      right: -(2 * @rp-entry-arrow-width + 2);
+    }
+  }
+
+  .rp-floating-entry-layout-left & {
+    left: -(@review-panel-width + @rp-entry-arrow-width + 2);
+
+    &::before {
+      right: -(2 * @rp-entry-arrow-width);
+    }
+  }
+
   .rp-state-current-file-expanded & {
     visibility: hidden;
     left: 5px;
@@ -518,7 +533,8 @@
     border-right-width: 0;
   }
 
-  .rp-state-current-file-mini.rp-layout-left & {
+  .rp-state-current-file-mini.rp-layout-left &,
+  .rp-floating-entry-layout-left & {
     &:first-child {
       border-bottom-left-radius: 3px;
     }
@@ -1276,6 +1292,10 @@ button when (@is-overleaf-light = true) {
   .rp-entry-list-react {
     position: relative;
     overflow: hidden;
+
+    .rp-size-mini & {
+      overflow: visible;
+    }
   }
 
   .rp-state-current-file & {