Fix mobile mention menu placement

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/MarkdownEditor.test.tsx

@@ -3,7 +3,7 @@
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { MarkdownEditor } from "./MarkdownEditor";
+import { computeMentionMenuPosition, MarkdownEditor } from "./MarkdownEditor";
 
 const mdxEditorMockState = vi.hoisted(() => ({
   emitMountEmptyReset: false,
@@ -162,4 +162,28 @@ describe("MarkdownEditor", () => {
       root.unmount();
     });
   });
+
+  it("anchors the mention menu inside the visual viewport when mobile offsets are present", () => {
+    expect(
+      computeMentionMenuPosition(
+        { viewportTop: 180, viewportLeft: 120 },
+        { offsetLeft: 24, offsetTop: 320, width: 320, height: 260 },
+      ),
+    ).toEqual({
+      top: 372,
+      left: 144,
+    });
+  });
+
+  it("clamps the mention menu back into view near the viewport edges", () => {
+    expect(
+      computeMentionMenuPosition(
+        { viewportTop: 260, viewportLeft: 240 },
+        { offsetLeft: 0, offsetTop: 0, width: 280, height: 220 },
+      ),
+    ).toEqual({
+      top: 12,
+      left: 92,
+    });
+  });
 });