Edit Reaction Picker Scaling
It would be pretty slick to be able to edit/resize the emoji reaction picker - either automatically based on the number of emojis in the picker (obviously with a limit) through the Soapbox configuration, or done via custom frontend builds. As of right now, the only way to do it is to edit app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
on the following class line:
/** Clickable emoji button that scales when hovered. */
const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
return (
<button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
<Emoji className='w-6 h-6 duration-100 hover:scale-125' emoji={emoji} /> /** originally 'w-8 h-8 ...' **/
</button>
);
};
The above class name allows for a relatively comfortable 9 reaction emoji possibilities for mobile devices, but if we were able to also edit the padding between the emojis in the picker, we could theoretically add even more.
Alternatively, if we were able to shift the reaction slider over some pixels, we would be able to fit more reactions on there and make use of the extra real estate to the left of the slider.