Update hoverable menu on Chat Messages

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -74,7 +74,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
       {
         name: 'offset',
         options: {
-          offset: [-10, 0],
+          offset: [-10, 12],
         },
       },
     ],

app/soapbox/features/chats/components/chat-message.tsx

@@ -7,7 +7,7 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
-import { HStack, Icon, IconButton, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown-menu-container';
 import emojify from 'soapbox/features/emoji/emoji';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -189,8 +189,69 @@ const ChatMessage = (props: IChatMessage) => {
   }, [chatMessage, chat]);
 
   return (
-    <div className='px-4 py-2'>
+    <div
-      <div key={chatMessage.id} className='group' data-testid='chat-message'>
+      className={
+        clsx({
+          'group relative px-4 py-2 hover:bg-gray-200/40 dark:hover:bg-gray-800/40': true,
+          'bg-gray-200/40 dark:bg-gray-800/40': isMenuOpen || isReactionSelectorOpen,
+        })
+      }
+      data-testid='chat-message'
+    >
+      <div
+        className={
+          clsx({
+            'p-1 flex items-center space-x-0.5 z-10 absolute opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-primary-700': true,
+            'top-2 right-2': !isMyMessage,
+            'top-2 left-2': isMyMessage,
+            '!opacity-100': isMenuOpen || isReactionSelectorOpen,
+          })
+        }
+      >
+        {!features.chatEmojiReactions ? (
+          <ChatMessageReactionWrapper
+            onOpen={setIsReactionSelectorOpen}
+            onSelect={(emoji) => createReaction.mutate({ emoji, messageId: chatMessage.id, chatMessage })}
+          >
+            <button
+              title={intl.formatMessage(messages.more)}
+              className={clsx({
+                'p-1.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:text-gray-700 dark:focus:text-gray-500 focus:ring-0': true,
+                '!text-gray-700 dark:!text-gray-500': isReactionSelectorOpen,
+              })}
+              data-testid='chat-message-menu'
+            >
+              <Icon
+                src={require('@tabler/icons/mood-smile.svg')}
+                className='h-4 w-4'
+              />
+            </button>
+          </ChatMessageReactionWrapper>
+        ) : null}
+
+        {menu.length > 0 && (
+          <DropdownMenuContainer
+            items={menu}
+            onOpen={() => setIsMenuOpen(true)}
+            onClose={() => setIsMenuOpen(false)}
+          >
+            <button
+              title={intl.formatMessage(messages.more)}
+              className={clsx({
+                'p-1.5 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:text-gray-700 dark:focus:text-gray-500 focus:ring-0': true,
+                '!text-gray-700 dark:!text-gray-500': isMenuOpen,
+              })}
+              data-testid='chat-message-menu'
+            >
+              <Icon
+                src={require('@tabler/icons/dots.svg')}
+                className='h-4 w-4'
+              />
+            </button>
+          </DropdownMenuContainer>
+        )}
+      </div>
+
       <Stack
         space={1.5}
         className={clsx({
@@ -204,48 +265,6 @@ const ChatMessage = (props: IChatMessage) => {
             'opacity-50': chatMessage.pending,
           })}
         >
-            {menu.length > 0 && (
-              <DropdownMenuContainer
-                items={menu}
-                onOpen={() => setIsMenuOpen(true)}
-                onClose={() => setIsMenuOpen(false)}
-              >
-                <IconButton
-                  src={require('@tabler/icons/dots.svg')}
-                  title={intl.formatMessage(messages.more)}
-                  className={clsx({
-                    'opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 flex text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:text-gray-700 dark:focus:text-gray-500': true,
-                    'mr-2 order-2': isMyMessage,
-                    'ml-2 order-2': !isMyMessage,
-                    '!text-gray-700 dark:!text-gray-500': isMenuOpen,
-                    '!opacity-100': isMenuOpen || isReactionSelectorOpen,
-                  })}
-                  data-testid='chat-message-menu'
-                  iconClassName='w-4 h-4'
-                />
-              </DropdownMenuContainer>
-            )}
-
-            {features.chatEmojiReactions ? (
-              <ChatMessageReactionWrapper
-                onOpen={setIsReactionSelectorOpen}
-                onSelect={(emoji) => createReaction.mutate({ emoji, messageId: chatMessage.id, chatMessage })}
-              >
-                <IconButton
-                  src={require('@tabler/icons/mood-smile.svg')}
-                  title={intl.formatMessage(messages.more)}
-                  className={clsx({
-                    'opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity flex text-gray-600 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 focus:text-gray-700 dark:focus:text-gray-500': true,
-                    'mr-2 order-1': isMyMessage,
-                    'ml-2 order-3': !isMyMessage,
-                    '!text-gray-700 dark:!text-gray-500': isReactionSelectorOpen,
-                    '!opacity-100': isMenuOpen || isReactionSelectorOpen,
-                  })}
-                  iconClassName='w-5 h-5'
-                />
-              </ChatMessageReactionWrapper>
-            ) : null}
-
           <Stack
             space={0.5}
             className={clsx({
@@ -364,7 +383,6 @@ const ChatMessage = (props: IChatMessage) => {
         </HStack>
       </Stack>
     </div>
-    </div>
   );
 };