diff --git a/app/soapbox/components/status-reaction-wrapper.tsx b/app/soapbox/components/status-reaction-wrapper.tsx index c2ce020f97..95323f24d3 100644 --- a/app/soapbox/components/status-reaction-wrapper.tsx +++ b/app/soapbox/components/status-reaction-wrapper.tsx @@ -1,9 +1,8 @@ -import { Portal } from '@reach/portal'; import React, { useState, useEffect, useRef } from 'react'; import { simpleEmojiReact } from 'soapbox/actions/emoji-reacts'; import { openModal } from 'soapbox/actions/modals'; -import { EmojiSelector } from 'soapbox/components/ui'; +import { EmojiSelector, Portal } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig } from 'soapbox/hooks'; import { isUserTouching } from 'soapbox/is-mobile'; import { getReactForStatus } from 'soapbox/utils/emoji-reacts'; diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx index 57d06b251e..9bbce36f72 100644 --- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx +++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx @@ -43,6 +43,8 @@ interface IEmojiSelector { placement?: Placement /** Whether the selector should be visible. */ visible?: boolean + /** X/Y offset of the floating picker. */ + offset?: [number, number] /** Whether to allow any emoji to be chosen. */ all?: boolean } @@ -54,6 +56,7 @@ const EmojiSelector: React.FC = ({ onReact, placement = 'top', visible = false, + offset = [-10, 0], all = true, }): JSX.Element => { const soapboxConfig = useSoapboxConfig(); @@ -80,7 +83,7 @@ const EmojiSelector: React.FC = ({ { name: 'offset', options: { - offset: [-10, 12], + offset, }, }, ], diff --git a/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx b/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx index d9403af4ae..10ca56b4f9 100644 --- a/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx +++ b/app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx @@ -41,6 +41,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) { referenceElement={referenceElement} onReact={handleSelect} onClose={() => setIsOpen(false)} + offset={[-10, 12]} all={false} />