fix: mention user position in post compose drawer

components/selection-toolbar/compose-post.tsx

@@ -186,6 +186,46 @@ export function ComposePost({
 
   const body = (
     <div className="space-y-4">
+      <div>
+        <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+          Mention people
+        </p>
+        {mentions.length > 0 ? (
+          <div className="mt-2 flex flex-wrap gap-2">
+            {mentions.map((u) => (
+              <span
+                key={u.id ?? u.handle}
+                className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-sm text-foreground"
+              >
+                @{u.handle}
+                <button
+                  type="button"
+                  onClick={() =>
+                    setMentions((prev) => prev.filter((m) => m.id !== u.id))
+                  }
+                  aria-label={`Remove @${u.handle}`}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  <X className="size-3.5" />
+                </button>
+              </span>
+            ))}
+          </div>
+        ) : null}
+        <div className="mt-2">
+          <MentionAutocomplete
+            excludeIds={mentions
+              .map((m) => m.id)
+              .filter((id): id is string => !!id)}
+            onSelect={(u) =>
+              setMentions((prev) =>
+                prev.some((m) => m.id === u.id) ? prev : [...prev, u],
+              )
+            }
+          />
+        </div>
+      </div>
+
       <div className="rounded-lg border border-border bg-muted/40 p-4">
         <p className="text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground">
           Caption (locked)
@@ -255,46 +295,6 @@ export function ComposePost({
         ) : null}
       </div>
 
-      <div>
-        <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
-          Mention people
-        </p>
-        {mentions.length > 0 ? (
-          <div className="mt-2 flex flex-wrap gap-2">
-            {mentions.map((u) => (
-              <span
-                key={u.id ?? u.handle}
-                className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-sm text-foreground"
-              >
-                @{u.handle}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setMentions((prev) => prev.filter((m) => m.id !== u.id))
-                  }
-                  aria-label={`Remove @${u.handle}`}
-                  className="text-muted-foreground hover:text-foreground"
-                >
-                  <X className="size-3.5" />
-                </button>
-              </span>
-            ))}
-          </div>
-        ) : null}
-        <div className="mt-2">
-          <MentionAutocomplete
-            excludeIds={mentions
-              .map((m) => m.id)
-              .filter((id): id is string => !!id)}
-            onSelect={(u) =>
-              setMentions((prev) =>
-                prev.some((m) => m.id === u.id) ? prev : [...prev, u],
-              )
-            }
-          />
-        </div>
-      </div>
-
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
       <button