Page MenuHomePhabricator
Files F3405110

D8289.diff
No OneTemporary
Actions

D8289.diff
View Options

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: 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
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -127,8 +127,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">

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 6:22 PM (11 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614579
Default Alt Text
D8289.diff (1 KB)

Event Timeline