From cee4e2f347d5bc8944827a0d7d25b375de13e899 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Fri, 13 Dec 2024 23:59:37 +0200
Subject: [PATCH] web/emojipicker: fix position above composer

---
 web/src/ui/composer/MessageComposer.tsx | 8 ++++++--
 web/src/ui/emojipicker/EmojiPicker.css  | 4 ++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx
index ee83e62..1177616 100644
--- a/web/src/ui/composer/MessageComposer.tsx
+++ b/web/src/ui/composer/MessageComposer.tsx
@@ -445,10 +445,14 @@ const MessageComposer = () => {
 		evt.stopPropagation()
 		roomCtx.setEditing(null)
 	}, [roomCtx])
+	const getEmojiPickerStyle = () => ({
+		bottom: (composerRef.current?.clientHeight ?? 32) + 4 + 24,
+		right: "var(--timeline-horizontal-padding)",
+	})
 	const openEmojiPicker = useEvent(() => {
 		openModal({
 			content: <EmojiPicker
-				style={{ bottom: (composerRef.current?.clientHeight ?? 32) + 2, right: "1rem" }}
+				style={getEmojiPickerStyle()}
 				room={roomCtx.store}
 				onSelect={(emoji: PartialEmoji) => setState({
 					text: state.text.slice(0, textInput.current?.selectionStart ?? 0)
@@ -462,7 +466,7 @@ const MessageComposer = () => {
 	const openGIFPicker = useEvent(() => {
 		openModal({
 			content: <GIFPicker
-				style={{ bottom: (composerRef.current?.clientHeight ?? 32) + 2, right: "1rem" }}
+				style={getEmojiPickerStyle()}
 				room={roomCtx.store}
 				onSelect={media => setState({ media })}
 			/>,
diff --git a/web/src/ui/emojipicker/EmojiPicker.css b/web/src/ui/emojipicker/EmojiPicker.css
index 9dbad56..6a0e9eb 100644
--- a/web/src/ui/emojipicker/EmojiPicker.css
+++ b/web/src/ui/emojipicker/EmojiPicker.css
@@ -207,9 +207,9 @@ div.emoji-picker {
 
 @media screen and (max-width: 37.5rem) {
 	div.emoji-picker, div.gif-picker {
-		inset: 0 0 40px 0 !important;
+		inset: 0 0 3rem 0 !important;
 		width: 100%;
-		height: calc(100% - 40px);
+		height: calc(100% - 3rem);
 		border-radius: 0;
 	}