From a0a9ae1ef495eb9dfc23f5c90a5b07fce7ec66a2 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Tue, 19 Nov 2024 11:07:33 +0100
Subject: [PATCH] Fixed "Add comment" tooltip if cursor is out of viewport
 (#21852)

* Fixed "Add comment" tooltip if cursor is out of viewport

* account for cm-line padding when calulation tooltip pos

GitOrigin-RevId: f4b69a3bf83dd15c0304bfd6b37f3be8b07cd727
---
 .../components/review-tooltip-menu.tsx        | 49 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx
index b33bf85175..36eff60211 100644
--- a/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx
+++ b/services/web/frontend/js/features/review-panel-new/components/review-tooltip-menu.tsx
@@ -1,4 +1,5 @@
 import {
+  CSSProperties,
   Dispatch,
   FC,
   SetStateAction,
@@ -32,6 +33,10 @@ import { isCursorNearViewportEdge } from '@/features/source-editor/utils/is-curs
 import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { numberOfChangesInSelection } from '../utils/changes-in-selection'
+import { useEditorManagerContext } from '@/features/ide-react/context/editor-manager-context'
+
+const TRACK_CHANGES_ON_WIDGET_HEIGHT = 25
+const CM_LINE_RIGHT_PADDING = 2
 
 const ReviewTooltipMenu: FC = () => {
   const state = useCodeMirrorStateContext()
@@ -70,11 +75,13 @@ const ReviewTooltipMenuContent: FC<{
   const { t } = useTranslation()
   const view = useCodeMirrorViewContext()
   const state = useCodeMirrorStateContext()
-  const { setReviewPanelOpen } = useLayoutContext()
+  const { setReviewPanelOpen, reviewPanelOpen } = useLayoutContext()
   const { setView } = useReviewPanelViewActionsContext()
   const ranges = useRangesContext()
   const { acceptChanges, rejectChanges } = useRangesActionsContext()
   const { showGenericConfirmModal } = useModalsContext()
+  const { wantTrackChanges } = useEditorManagerContext()
+  const [tooltipStyle, setTooltipStyle] = useState<CSSProperties | undefined>()
 
   const addComment = useCallback(() => {
     setReviewPanelOpen(true)
@@ -151,8 +158,46 @@ const ReviewTooltipMenuContent: FC<{
 
   const showChangesButtons = changeIdsInSelection.length > 0
 
+  useEffect(() => {
+    view.requestMeasure({
+      key: 'review-tooltip-outside-viewport',
+      read(view) {
+        const cursorCoords = view.coordsAtPos(view.state.selection.main.head)
+
+        if (!cursorCoords) {
+          return
+        }
+
+        const scrollDomRect = view.scrollDOM.getBoundingClientRect()
+        const contentDomRect = view.contentDOM.getBoundingClientRect()
+        const editorRightPos = contentDomRect.right - CM_LINE_RIGHT_PADDING
+
+        if (
+          cursorCoords.top > scrollDomRect.top &&
+          cursorCoords.top < scrollDomRect.bottom
+        ) {
+          return
+        }
+
+        const widgetOffset =
+          wantTrackChanges && !reviewPanelOpen
+            ? TRACK_CHANGES_ON_WIDGET_HEIGHT
+            : 0
+
+        return {
+          position: 'fixed' as const,
+          top: scrollDomRect.top + widgetOffset,
+          right: window.innerWidth - editorRightPos,
+        }
+      },
+      write(res) {
+        setTooltipStyle(res)
+      },
+    })
+  }, [view, reviewPanelOpen, wantTrackChanges])
+
   return (
-    <div className="review-tooltip-menu">
+    <div className="review-tooltip-menu" style={tooltipStyle}>
       <button
         className="review-tooltip-menu-button review-tooltip-add-comment-button"
         onClick={addComment}