Support wide custom emojis

app/javascript/mastodon/components/status_action_bar.jsx

@@ -369,13 +369,17 @@ class StatusActionBar extends ImmutablePureComponent {
       <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
+    const emojiPickerButton = (
+      <IconButton className='status__action-bar__button' icon='smile-o' />
+    );
+
     return (
       <div className='status__action-bar'>
         <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
         <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
         <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} />
 
         {shareButton}
 

app/javascript/mastodon/components/status_emoji_reactions_bar.jsx

@@ -73,7 +73,7 @@ class StatusEmojiReactionsBar extends React.PureComponent {
   render () {
     const { emojiReactions } = this.props;
 
-    const emojiButtons = Array.from(emojiReactions).map((emoji, index) => (
+    const emojiButtons = Array.from(emojiReactions).filter(emoji => emoji.get('count') != 0).map((emoji, index) => (
       <EmojiReactionButton
         key={index}
         name={emoji.get('name')}

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -267,6 +267,10 @@ class ActionBar extends React.PureComponent {
       <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
     );
 
+    const emojiPickerButton = (
+      <IconButton icon='smile-o' />
+    );
+
     let replyIcon;
     if (status.get('in_reply_to_id', null) === null) {
       replyIcon = 'reply';
@@ -293,7 +297,7 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
-        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} /></div>
+        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} /></div>
 
         {shareButton}
 

app/javascript/styles/mastodon/components.scss

@@ -802,7 +802,8 @@ body > [data-popper-placement] {
   vertical-align: middle;
   object-fit: contain;
   margin: -0.2ex 0.15em 0.2ex;
-  width: 16px;
+  min-width: 16px;
+  max-width: min(8em, 100%);
   height: 16px;
 
   img {
@@ -878,7 +879,8 @@ body > [data-popper-placement] {
   }
 
   .emojione {
-    width: 20px;
+    min-width: 20px;
+    max-width: min(8em, 100%);
     height: 20px;
     margin: -3px 0 0;
   }
@@ -959,7 +961,8 @@ body > [data-popper-placement] {
   overflow-y: auto;
 
   .emojione {
-    width: 20px;
+    min-width: 20px;
+    max-width: min(8em, 100%);
     height: 20px;
     margin: -3px 0 0;
   }
@@ -1334,7 +1337,8 @@ body > [data-popper-placement] {
     line-height: 24px;
 
     .emojione {
-      width: 24px;
+      min-width: 24px;
+      max-width: min(8em, 100%);
       height: 24px;
       margin: -1px 0 0;
     }
@@ -4122,6 +4126,10 @@ a.status-card.compact:hover {
   text-align: center;
 }
 
+.detailed-status__button .emoji-button {
+  padding: 0;
+}
+
 .column-settings__outer {
   background: lighten($ui-base-color, 8%);
   padding: 15px;
@@ -5871,7 +5879,8 @@ a.status-card.compact:hover {
     line-height: 24px;
 
     .emojione {
-      width: 24px;
+      min-width: 24px;
+      max-width: min(8em, 100%);
       height: 24px;
       margin: -1px 0 0;
     }
@@ -7222,7 +7231,8 @@ noscript {
       }
 
       .emojione {
-        width: 22px;
+        min-width: 22px;
+        max-width: min(8em, 100%);
         height: 22px;
       }
 

app/javascript/styles/mastodon/emoji_picker.scss

@@ -166,6 +166,11 @@
 .emoji-mart-category .emoji-mart-emoji {
   cursor: pointer;
 
+  &.emoji-mart-emoji-custom img {
+    width: auto !important;
+    min-width: 22px;
+  }
+
   span {
     z-index: 1;
     position: relative;

app/javascript/styles/mastodon/tables.scss

@@ -299,7 +299,8 @@ a.table-action-link {
         margin-right: 10px;
 
         .emojione {
-          width: 32px;
+          min-width: 32px;
+          max-width: min(8em, 100%);
           height: 32px;
         }
       }

app/javascript/styles/mastodon/widgets.scss

@@ -36,7 +36,8 @@
     font-weight: 400;
 
     .emojione {
-      width: 20px;
+      min-width: 20px;
+      max-width: min(8em, 100%);
       height: 20px;
       margin: -3px 0 0;
       margin-left: 0.075em;