feat: add mobile-responsive overlay and improved positioning for emoji and GIF pickers

src/components/message/MessageInput.tsx

@@ -196,6 +196,7 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
     } else {
       setMessage((prev) => prev + emoji.native);
     }
+    setShowEmojiPicker(false);
   };
 
   const handleGifSelect = (gif: { images: { original: { url: string } } }, e: React.SyntheticEvent) => {
@@ -349,6 +350,11 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
               />
             </button>
             {showGifPicker && (
+              <>
+                <div
+                  className="fixed inset-0 z-40 sm:hidden"
+                  onClick={() => setShowGifPicker(false)}
+                />
               <div
                 ref={gifPickerRef}
                 className="absolute bottom-full left-0 mb-2 z-50 bg-white border border-[#00293d]/10 rounded-[15px] shadow-lg overflow-hidden w-[min(360px,calc(100vw-32px))] h-[420px]"
@@ -378,6 +384,7 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
                   <span className="font-serif text-[10px] text-[#00293D]/40">Powered by GIPHY</span>
                 </div>
               </div>
+              </>
             )}
           </div>
 
@@ -396,15 +403,25 @@ export function MessageInput({ onSend, onSendGif, onSendFile, onTypingStart, onT
               />
             </button>
             {showEmojiPicker && (
-              <div ref={emojiPickerRef} className="absolute bottom-full left-0 mb-2 z-50">
+              <>
+                <div
+                  className="fixed inset-0 z-40 sm:hidden"
+                  onClick={() => setShowEmojiPicker(false)}
+                />
+                <div
+                  ref={emojiPickerRef}
+                  className="fixed left-1/2 -translate-x-1/2 bottom-24 sm:absolute sm:bottom-full sm:left-0 sm:right-auto sm:translate-x-0 sm:mb-2 z-50 sm:origin-bottom-left"
+                >
                   <Picker
                     data={data}
                     onEmojiSelect={handleEmojiSelect}
                     theme="light"
                     previewPosition="none"
                     skinTonePosition="search"
+                    perLine={typeof window !== 'undefined' && window.innerWidth < 400 ? 7 : 9}
                   />
                 </div>
+              </>
             )}
           </div>
         </div>