Allow emoji picker to fit smaller viewports (#4651)

* fixed 4493 issue

* Update web/components/chat/ChatTextField/ChatTextField.module.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* lint error fix

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -80,3 +80,10 @@
   cursor: pointer;
   padding: 0 1rem;
 }
+
+// Constrain the emoji picker popover to the viewport and allow scrolling.
+.emojiPickerContainer {
+  max-height: 70vh;
+  max-width: 90vw;
+  overflow: auto hidden;
+}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -276,7 +276,11 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
         {enabled && (
           <div style={{ display: 'flex', paddingLeft: '5px' }}>
             <Popover
-              content={<EmojiPicker customEmoji={customEmoji} onEmojiSelect={onEmojiSelect} />}
+              content={
+                <div className={styles.emojiPickerContainer}>
+                  <EmojiPicker customEmoji={customEmoji} onEmojiSelect={onEmojiSelect} />
+                </div>
+              }
               trigger="click"
               placement="topRight"
             >

web/components/chat/ChatTextField/EmojiPicker.tsx

@@ -39,6 +39,12 @@ export const EmojiPicker: FC<EmojiPickerProps> = ({ onEmojiSelect, customEmoji }
   }, []);
 
   return (
-    <Picker data={data} custom={custom} onEmojiSelect={onEmojiSelect} categories={categories} />
+    <Picker
+      data={data}
+      custom={custom}
+      onEmojiSelect={onEmojiSelect}
+      categories={categories}
+      dynamicWidth
+    />
   );
 };