scttcper/ngx-emoji-mart

Native emojis :before element aligning and size issue

closedi opened this issue · 1 comments

Hello. I've noticed an issue with native emoji sizing and :before element while hovering emojis. Issue is reproducible even on your demo page https://ngx-emoji-mart.vercel.app/
For instance, if I set emoji set as Native, the actual inserting #text elements doesn't match emojiSize property (actual emoji element sizing is about 33px width and 32px height instead of expected 24px set), as a result we have wrong-aligned hovering effect and total width increased with a X-axis scrollbar appeared. Is this a known issue, could you fix this somehow?

emoji-mart.demo.app.issue.mp4

Demo video attached, I also change hovering color to red just in visibility purposes.

Noticed this same problem, my workaround was some css to target the element. Note that this keeps the size but centers it

.emoji-mart .emoji-mart-emoji span {
		left: -.15em;
		top: -.1em;
}