From 2783819eebbfba62beed1571c5a49e1d820c4a7d Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Mon, 8 Jan 2024 13:28:46 +0100
Subject: [PATCH] Fix mention options positioning

---
 src/components/NewNote/EditBox/EditBox.tsx |  6 ++++++
 src/pages/Messages.tsx                     | 12 +++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/NewNote/EditBox/EditBox.tsx b/src/components/NewNote/EditBox/EditBox.tsx
index 0c7b81b..b84d089 100644
--- a/src/components/NewNote/EditBox/EditBox.tsx
+++ b/src/components/NewNote/EditBox/EditBox.tsx
@@ -280,6 +280,12 @@ const EditBox: Component<{
 
     if (!isMentioning() && e.key === '@') {
       mentionCursorPosition = getCaretCoordinates(textArea, textArea.selectionStart);
+
+      // Ignore if `@` is a part of a word
+      if (textArea.selectionStart > 0 && ![' ', '\r\n', '\r', '\n'].includes(textArea.value[textArea.selectionStart-1])) {
+        return false;
+      }
+
       setPreQuery('');
       setQuery('');
       setMentioning(true);
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index bcb0a86..abb83f2 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -498,6 +498,12 @@ const Messages: Component = () => {
 
     if (!isMentioning() && e.key === '@') {
       mentionCursorPosition = getCaretCoordinates(newMessageInput, newMessageInput.selectionStart);
+
+      // Ignore if `@` is a part of a word
+      if (newMessageInput.selectionStart > 0 && ![' ', '\r\n', '\r', '\n'].includes(newMessageInput.value[newMessageInput.selectionStart-1])) {
+        return false;
+      }
+
       setPreQuery('');
       setQuery('');
       setMentioning(true);
@@ -733,9 +739,13 @@ const Messages: Component = () => {
 
     const taRect = newMessageInput.getBoundingClientRect();
 
-    let newBottom = taRect.height - mentionCursorPosition.top;
+    let newBottom = taRect.height - mentionCursorPosition.top + 32;
     let newLeft = mentionCursorPosition.left;
 
+    if (newLeft + mentionOptions.getBoundingClientRect().width > 628) {
+      newLeft = 628 - mentionOptions.getBoundingClientRect().width;
+    }
+
     mentionOptions.style.bottom = `${newBottom}px`;
     mentionOptions.style.left = `${newLeft}px`;
   };