diff --git a/web/avatars/emoji-avatar-selection-modal.css b/web/avatars/emoji-avatar-selection-modal.css
--- a/web/avatars/emoji-avatar-selection-modal.css
+++ b/web/avatars/emoji-avatar-selection-modal.css
@@ -2,12 +2,25 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-height: 574px;
+}
+
+/* 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
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -131,8 +131,15 @@
         </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">