Bug: odd emoji style on highlights on small screens

[a0m0rajab]

Describe the bug

While browsing the site, I found this as odd behavior, the emojis at the bottom of the card is not aligned.

Steps to reproduce

1. go to highlights feed
2. go to a card with 4-5 emoji reactions
3. you will see the issue

Browsers

No response

Additional context (Is this in dev or production?)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[takanome-dev]

@a0m0rajab which browser did you noticed this?

Tested in Brave Browser and looks good

[a0m0rajab]

Chrome, a thing that I forgot to write, this is happening on small screens:

[Satoshi-Sh]

On it. .take

[Satoshi-Sh]

I spent lots of time on this.

The problem is the Emoji component (contributor-hilight-card.tsx) has a hardcoded style inside. We cannot override it.

<span style="width: 1em; height: 1em; margin: 0px 0.05em 0px 0.1em; vertical-align: -0.1em;">👀</span>

Here is the related discussion.
tommoor/react-emoji-render#48 (comment)

We might need to take another approach or make a pull request on the library. I will unassign myself for now.

[a0m0rajab]

@brandonroberts FYI: the emojis is still not aligned with the number

it will be even weirder when you have double digits: