n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/emojipicker: fix position above composer

Browse source
This commit is contained in:
Tulir Asokan 2024-12-13 23:59:37 +02:00
parent daa0ce722d
commit cee4e2f347
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/ui/composer/MessageComposer.tsx
View file

@ -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 })}
/>,

4
web/src/ui/emojipicker/EmojiPicker.css
View file

@ -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;
}