[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

@@ -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;

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">