Css issues with Emoji on Github profile

The text and emoji overlap at github profile section.

Selection_033

2 Likes

Seriously, @ciami7, is this all you do is respond with unproductive comments to people’s threads? You’ve also responded to mine in the same destructive manner. You really must be bored.

With that unpleasantness out of the way, @bibhuticoder I too am experiencing this with Issue Labels and you quite rightfully pointed out that a similar issue is happening with any emoji. Well spotted. I’m actually wondering if this has something to do with Chrome updating recently.

2 Likes

Hi @bibhuticoder, @LukeWolfGames I can see the same issue with my commit messages as I am using emojis in my commit messages. Attaching an image of the same.

2 Likes

I thought it was a browser problem, but after struggling this I found it is related to the GitHub CSS itself, specifically in the hx_browsers.scss file.

The width of <g-emoji> component is set always to 1ch. Removing this style fix this problem on DevTools inspection.

CSS inspect details:

image

User-agent details:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
1 Like

@ggondim Forgive the noob question, but I don’t know a lot about web development. Is this something we can fix ourselves or is this something GitHub has to fix?

Since this seems like CSS issue, GitHub has to look into. Not in our control.

1 Like

GitHub have now fixed the issue.
Thanks for all of your support!

1 Like