From 722eab8e94da102acd7995410535227db2b3fb7e Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 2 Jul 2026 12:16:57 -0400
Subject: [PATCH] fix: position kaomoji picker above message input bar

Moved EmojiPicker inside the form element so it anchors to the
input area (form is already position:relative). Picker now pops
up above the input instead of floating in the message scroll area.
---
 web/src/components/ChatArea.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/web/src/components/ChatArea.tsx b/web/src/components/ChatArea.tsx
index 16dd5e9..95f2d39 100644
--- a/web/src/components/ChatArea.tsx
+++ b/web/src/components/ChatArea.tsx
@@ -661,14 +661,6 @@ export function ChatArea() {
                   <GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />
                 </div>
               )}
-              {showKaomoji && (
-                <div className="px-3 pb-1">
-                  <EmojiPicker
-                    onSelect={(emoji) => setInput((prev) => prev + emoji)}
-                    onClose={() => setShowKaomoji(false)}
-                  />
-                </div>
-              )}
               <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none">
                 {(() => {
                   const chTyping = activeChannelId ? (typingUsers[activeChannelId] || []).filter(u => u.userId !== currentUser?.id) : [];
@@ -741,6 +733,12 @@ export function ChatArea() {
                 >
                   [☺]
                 </button>
+                {showKaomoji && (
+                  <EmojiPicker
+                    onSelect={(emoji) => setInput((prev) => prev + emoji)}
+                    onClose={() => setShowKaomoji(false)}
+                  />
+                )}
               </form>
             </div>
             {activeThread && (