fix: fixed mentions menu position and focus

front/src/pages/ChannelPage.tsx

@@ -16,6 +16,7 @@ export default function ChannelPage() {
     const [message, setMessage] = useState<string>("");
     const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
     const [searchedUsers, setSearchedUsers] = useState<User[]>([]);
+    const ref = React.createRef<HTMLInputElement>();
 
     function handleSubmit(e: React.FormEvent) {
         e.preventDefault();
@@ -121,13 +122,13 @@ export default function ChannelPage() {
                             placeholder="Message"
                             value={message}
                             onChange={(e) => setMessage(e.target.value)}
+                            ref={ref}
                         />
                         <button type="submit">Send</button>
                         {searchedUsers.length > 0 && (
-                            <div>
-                                <p>Mentions:</p>
+                            <div className="mentions">
                                 {searchedUsers.map((user) => (
-                                    <div key={user.id}>
+                                    <div key={user.id} className="mention">
                                         <Link to={`/u/${user.username}`}>{user.username}</Link>
                                         <button
                                             type="button"
@@ -136,6 +137,7 @@ export default function ChannelPage() {
                                                     message.split(" ").slice(0, -1).join(" ") + " @" + user.username + " "
                                                 );
                                                 setSearchedUsers([]);
+                                                ref.current?.focus();
                                             }}
                                         >
                                             Mention

front/src/styles/ChannelPage.css

@@ -16,6 +16,29 @@
 
 .message-form {
     margin: 16px 0;
+    position: relative;
+}
+
+.mentions {
+    position: absolute;
+    top: 100%;
+    border: 1px solid #270722;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: left;
+    gap: 5px;
+    width: 20%;
+    background-color: white;
+}
+
+.mention {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: top;
+    gap: 5px;
 }
 
 .login-prompt {