Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
pradeepkumar
2026-04-18 16:46:23 +05:30
parent 30adc9349c
commit 3f37b13f8f
1 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/message/MessageInput.tsx
View File

@@ -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">
<Picker
data={data}
onEmojiSelect={handleEmojiSelect}
theme="light"
previewPosition="none"
skinTonePosition="search"
<>
<div
className="fixed inset-0 z-40 sm:hidden"
onClick={() => setShowEmojiPicker(false)}
/>
</div>
<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>