correct top for comment boxes

editors/editoria/src/Editoria.js

 import React, { useLayoutEffect, useState, useMemo } from 'react';
-import { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 
 import { Wax } from 'wax-prosemirror-core';
 
@@ -56,6 +56,7 @@ const Editoria = () => {
     () => (
       <>
         <GlobalStyle />
+        <div>Hello</div>
         <Wax
           key={key}
           config={finalConfig}

editors/editoria/src/layout/EditoriaLayout.js

@@ -248,7 +248,7 @@ const EditoriaLayout = ({ editor }) => {
 
   return (
     <ThemeProvider theme={cokoTheme}>
-      <Wrapper style={fullScreenStyles}>
+      <Wrapper style={fullScreenStyles} id="wax-container">
         <TopMenu>
           <MainMenuToolBar />
         </TopMenu>

wax-prosemirror-components/src/components/rightArea/RightArea.js

@@ -58,15 +58,24 @@ export default ({ area }) => {
           annotationTop =
             markNodeEl.getBoundingClientRect().top - WaxSurface.top;
       } else {
+        // Notes
         panelWrapper = document.getElementsByClassName('panelWrapper');
         panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
 
         markNodeEl = document
           .querySelector('#notes-container')
           .querySelector(`[data-id="${id}"]`);
-        if (markNodeEl)
+        if (markNodeEl) {
+          const WaxContainerTop = document
+            .querySelector('#wax-container')
+            .getBoundingClientRect().top;
+
           annotationTop =
-            markNodeEl.getBoundingClientRect().top - panelWrapperHeight - 50;
+            markNodeEl.getBoundingClientRect().top -
+            panelWrapperHeight -
+            WaxContainerTop -
+            50;
+        }
       }
 
       let boxEl = null;