From 12e2671bb0666babdc47d344b1c185798c8deefc Mon Sep 17 00:00:00 2001
From: Atul Madhugiri <atulm@berkeley.edu>
Date: Wed, 21 Jun 2023 19:25:04 -0400
Subject: [PATCH] [web] Style "Emoji" tab of `EmojiAvatarSelectionModal`

Summary:
Here's how it looks:
{F601040}

Here it is w/ some "debugging" guides:
{F601041}

---

Depends on D8287

Test Plan: NA, see above

Reviewers: ashoat, ginsu, rohan

Reviewed By: ginsu

Subscribers: tomek

Differential Revision: https://phab.comm.dev/D8289
---
 web/avatars/emoji-avatar-selection-modal.css      | 13 +++++++++++++
 web/avatars/emoji-avatar-selection-modal.react.js | 11 +++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
index dfa948d499..d248652210 100644
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -2,12 +2,25 @@ div.modalContainer {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-height: 594px;
+}
+
+/* https://github.com/missive/emoji-mart/discussions/663 */
+em-emoji-picker {
+  max-height: 300px;
 }
 
 div.modalBody {
   padding: 20px;
 }
 
+div.tabBody {
+  padding-top: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 div.avatarContainer {
   display: flex;
   justify-content: center;
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
index 253bcfe384..c92d398177 100644
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -127,8 +127,15 @@ function EmojiAvatarSelectionModal(): React.Node {
         </div>
         <Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
           <Tabs.Item id="emoji" header="Emoji">
-            <div className={css.emojiPickerContainer}>
-              <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
+            <div className={css.tabBody}>
+              <div className={css.emojiPickerContainer}>
+                <Picker
+                  data={data}
+                  theme="dark"
+                  onEmojiSelect={onEmojiSelect}
+                  perLine={12}
+                />
+              </div>
             </div>
           </Tabs.Item>
           <Tabs.Item id="color" header="Color">