chat: emoji react selector mobile fixes

ui/src/chat/ChatMessage/__snapshots__/ChatMessage.test.tsx.snap

@@ -178,7 +178,9 @@ exports[`ChatMessage > renders as expected 1`] = `
             </svg>
           </button>
         </div>
-        <div />
+        <div
+          class=""
+        />
         <div
           class="group-two cursor-pointer"
         >

ui/src/chat/ChatReactions/ChatReaction.tsx

@@ -46,7 +46,10 @@ export default function ChatReaction({
             <Tooltip.Trigger>
               <button
                 onClick={editFeel}
-                className="group relative flex items-center space-x-2 rounded border border-solid border-transparent bg-gray-50 px-2 py-1 text-sm font-semibold leading-4 text-gray-600 group-one-hover:border-gray-100"
+                className={cn(
+                  'group relative flex items-center space-x-2 rounded border border-solid border-transparent bg-gray-50 px-2 py-1 text-sm font-semibold leading-4 text-gray-600 group-one-hover:border-gray-100',
+                  isMine && 'bg-blue-softer group-one-hover:border-blue-soft'
+                )}
                 aria-label={
                   isMine ? 'Remove reaction' : `Add ${feel.replaceAll(':', '')}`
                 }

ui/src/components/EmojiPicker.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect } from 'react';
 import Picker from '@emoji-mart/react';
 import * as Popover from '@radix-ui/react-popover';
+import * as Dialog from '@radix-ui/react-dialog';
 import useEmoji from '@/state/emoji';
+import { useIsMobile } from '@/logic/useMedia';
 import LoadingSpinner from './LoadingSpinner/LoadingSpinner';
 
 interface EmojiPickerProps extends Record<string, any> {
@@ -15,17 +17,27 @@ export default function EmojiPicker({
   ...props
 }: EmojiPickerProps) {
   const { data, load } = useEmoji();
+  const isMobile = useIsMobile();
+  const width = window.innerWidth;
+  const mobilePerLineCount = Math.floor((width - 10) / 36);
 
   useEffect(() => {
     load();
   }, [load]);
 
+
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Anchor />
+      <Popover.Anchor className={isMobile ? 'fixed inset-x-0 top-12' : ''} />
       <Popover.Content sideOffset={8}>
         {data ? (
-          <Picker data={data} previewPosition="none" {...props} />
+          <Picker
+            data={data}
+            autoFocus={isMobile}
+            perLine={isMobile ? mobilePerLineCount : 9}
+            previewPosition="none"
+            {...props}
+          />
         ) : (
           <div className="flex h-96 w-72 items-center justify-center">
             <LoadingSpinner className="h-6 w-6" />

ui/src/styles/components.css

@@ -60,6 +60,14 @@
   @apply my-0;
 }
 
+/* hack to prevent auto-zoom on em-emoji-picker */
+@media screen and (max-width: 767px) {
+  em-emoji-picker {
+    --font-size: 17px;
+    height: 45vh;
+  }
+}
+
 .dialog-container {
   @apply fixed top-1/2 left-1/2 z-40 -translate-x-1/2 -translate-y-1/2 transform p-4;
 }