Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 18:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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() evt.stopPropagation()
roomCtx.setEditing(null) roomCtx.setEditing(null)
}, [roomCtx]) }, [roomCtx])
const getEmojiPickerStyle = () => ({
bottom: (composerRef.current?.clientHeight ?? 32) + 4 + 24,
right: "var(--timeline-horizontal-padding)",
})
const openEmojiPicker = useEvent(() => { const openEmojiPicker = useEvent(() => {
openModal({ openModal({
content: <EmojiPicker content: <EmojiPicker
style={{ bottom: (composerRef.current?.clientHeight ?? 32) + 2, right: "1rem" }} style={getEmojiPickerStyle()}
room={roomCtx.store} room={roomCtx.store}
onSelect={(emoji: PartialEmoji) => setState({ onSelect={(emoji: PartialEmoji) => setState({
text: state.text.slice(0, textInput.current?.selectionStart ?? 0) text: state.text.slice(0, textInput.current?.selectionStart ?? 0)
@ -462,7 +466,7 @@ const MessageComposer = () => {
const openGIFPicker = useEvent(() => { const openGIFPicker = useEvent(() => {
openModal({ openModal({
content: <GIFPicker content: <GIFPicker
style={{ bottom: (composerRef.current?.clientHeight ?? 32) + 2, right: "1rem" }} style={getEmojiPickerStyle()}
room={roomCtx.store} room={roomCtx.store}
onSelect={media => setState({ media })} 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) { @media screen and (max-width: 37.5rem) {
div.emoji-picker, div.gif-picker { div.emoji-picker, div.gif-picker {
inset: 0 0 40px 0 !important; inset: 0 0 3rem 0 !important;
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 3rem);
border-radius: 0; border-radius: 0;
} }