Fix emoji location

Author: MartinBraquet

web/components/chat/chat-message.tsx

@@ -119,7 +119,7 @@ export function ChatMessageItem(props: {
                   </div>
                 </Row>
                 {/* Hidden host for emoji picker, opened via long-press */}
-                <div className="absolute right-0 top-0 -mt-2">
+                <div className="absolute left-1/2 transform -translate-x-1/2 -mt-2">
                   <MessageActions
                     message={{
                       id: chat.id,

web/components/chat/message-actions.tsx

@@ -11,6 +11,7 @@ import {handleReaction} from "web/lib/util/message-reactions"
 import {useClickOutside} from "web/hooks/use-click-outside"
 import {PrivateChatMessage} from "common/chat-message";
 import {updateReactionUI} from "web/lib/supabase/chat-messages";
+import {useIsMobile} from "web/hooks/use-is-mobile";
 
 const REACTIONS = ['👍', '❤️', '😂', '😮', '😢', '👎']
 
@@ -35,6 +36,7 @@ export function MessageActions(props: {
   const emojiPickerRef = useRef<HTMLDivElement>(null)
   const user = useUser()
   const isOwner = user?.id === message.userId
+  const isMobile = useIsMobile()
 
   useClickOutside(emojiPickerRef, () => {
     setShowEmojiPicker(false)
@@ -65,34 +67,32 @@ export function MessageActions(props: {
 
   return (
     <div className={clsx('flex items-center gap-1', className)}>
-      <div className="relative">
-        {showEmojiPicker && (
-          <div
-            ref={emojiPickerRef}
-            className={clsx(
-              "absolute top-full mb-2 rounded-lg bg-canvas-200 p-2 shadow-lg pr-10 z-10",
-              isOwner && 'right-0',
-              !isOwner && 'left-0',
-            )}
-          >
-            <div className="grid grid-cols-6 gap-8">
-              {REACTIONS.map((reaction) => (
-                <button
-                  key={reaction}
-                  className="text-2xl hover:scale-125"
-                  onClick={async () => {
-                    setShowEmojiPicker(false)
-                    updateReactionUI(message, user, reaction, setMessages)
-                    await handleReaction(reaction, message.id)
-                  }}
-                >
-                  {reaction}
-                </button>
-              ))}
-            </div>
+      {showEmojiPicker && (
+        <div
+          ref={emojiPickerRef}
+          className={clsx(
+            'absolute mb-2 rounded-lg bg-canvas-200 p-2 shadow-lg pr-10 z-10 max-w-[250px]',
+            isMobile ? 'left-1/2 transform -translate-x-1/2'
+              : isOwner ? 'right-20' : 'left-20'
+          )}
+        >
+          <div className="grid grid-cols-6 gap-8">
+            {REACTIONS.map((reaction) => (
+              <button
+                key={reaction}
+                className="text-2xl hover:scale-125"
+                onClick={async () => {
+                  setShowEmojiPicker(false)
+                  updateReactionUI(message, user, reaction, setMessages)
+                  await handleReaction(reaction, message.id)
+                }}
+              >
+                {reaction}
+              </button>
+            ))}
           </div>
-        )}
-      </div>
+        </div>
+      )}
       {!hideTrigger && (
         <DropdownMenu
           items={[
@@ -117,7 +117,7 @@ export function MessageActions(props: {
           closeOnClick={true}
           icon={<DotsHorizontalIcon className="h-5 w-5 text-gray-500"/>}
           menuWidth="w-40"
-          className="text-ink-500 hover:text-ink-700 rounded-full p-1 hover:bg-gray-100"
+          className="text-ink-500 hover:text-ink-700 rounded-full p-1 hover:bg-canvas-50"
         />
       )}
       {/*{message.isEdited && (*/}

web/components/comments/dropdown-menu.tsx

@@ -70,7 +70,7 @@ export default function DropdownMenu(props: {
               style={styles.popper}
               {...attributes.popper}
               className={clsx(
-                'bg-canvas-0 ring-ink-1000  z-30 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none',
+                'bg-canvas-0 ring-ink-1000 z-30 mt-2 rounded-md shadow-lg ring-1 ring-opacity-5 focus:outline-none',
                 menuWidth ?? 'w-34',
                 menuItemsClass,
                 'py-1'
@@ -90,7 +90,7 @@ export default function DropdownMenu(props: {
                     className={clsx(
                       selectedItemName && item.name == selectedItemName
                         ? 'bg-primary-100'
-                        : 'hover:bg-ink-300 hover:text-ink-900',
+                        : 'hover:bg-canvas-100 hover:text-ink-900',
                       'text-ink-700',
                       'flex w-full gap-2 px-4 py-2 text-left text-sm'
                     )}