fix: Initial positioning of mention menu in comments

app/editor/components/MentionMenu.tsx

@@ -36,6 +36,7 @@ type Props = Omit<
 >;
 
 function MentionMenu({ search, isActive, ...rest }: Props) {
+  const [loaded, setLoaded] = React.useState(false);
   const [items, setItems] = React.useState<MentionItem[]>([]);
   const { t } = useTranslation();
   const { users, auth } = useStores();
@@ -75,6 +76,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       }));
 
       setItems(items);
+      setLoaded(true);
     }
   }, [auth.user?.id, loading, data]);
 
@@ -91,6 +93,12 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
     );
   };
 
+  // Prevent showing the menu until we have data otherwise it will be positioned
+  // incorrectly due to the height being unknown.
+  if (!loaded) {
+    return null;
+  }
+
   return (
     <SuggestionsMenu
       {...rest}

app/editor/components/SuggestionsMenu.tsx

@@ -88,6 +88,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
 
   const calculatePosition = React.useCallback(
     (props: Props) => {
+      console.log("calculatePosition");
       if (!props.isActive) {
         return defaultPosition;
       }
@@ -141,7 +142,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
         leftPos = right - offsetWidth;
       }
 
-      if (top - offsetHeight > margin) {
+      if (top - offsetHeight > offsetParent.top + margin) {
         return {
           left: leftPos,
           top: undefined,