Fix positioning of popover

client/src/helpers/highlight.ts

@@ -292,8 +292,15 @@ const onUpdateTextCurry = (highlight: HighlightNode) => (text: string) =>
     },
   });
 
-const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: HighlightNode) => () => {
-  if (popoverWrapper) {
+interface ClickListenerCurryOptions {
+  wrapper: HTMLElement; // the element the popover will be the direct child of, which has relative positioning
+  parent: HTMLElement; // the element (paragraph/list) the highlight is inside
+  highlight: HighlightNode;
+}
+const markClickListenerCurry =
+  ({ wrapper, parent, highlight }: ClickListenerCurryOptions) =>
+  () => {
+    if (wrapper) {
       const onChooseColor = async (color: string) => {
         try {
           const {
@@ -317,9 +324,10 @@ const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: H
         }
       };
 
+      const top = parent.getBoundingClientRect().top - wrapper.getBoundingClientRect().top;
       popover.show({
-      wrapper: popoverWrapper,
-      offsetTop: 0,
+        wrapper: wrapper,
+        offsetTop: top,
         onChooseColor,
         onDelete: deleteHighlightCurry(highlight),
       });
@@ -345,7 +353,14 @@ export const markHighlight = (highlight: HighlightNode, element: HTMLElement, po
     each: (newMark: HTMLElement) => {
       newMark.dataset.id = highlight.id;
       newMark.dataset.cy = 'highlight-mark';
-      newMark.addEventListener('click', markClickListenerCurry(popoverElement, highlight));
+      newMark.addEventListener(
+        'click',
+        markClickListenerCurry({
+          wrapper: popoverElement,
+          parent: element,
+          highlight,
+        })
+      );
     },
   });
 };