Calculation of width from perLine not matching

[jotoeri]

The calculation of the picker-width out of the perLine-prop seems a bit off? Probably not respecting the padding between emojis?
-> On the example, perLine is set to 9, but only shows 7 emojis per line.

However, might indeed be hard to calculate that, especially, if the padding between emojis might change with emoji-size? 🤔

Greets :)
Jonas

EDIT: Recognized on v10.0.1 😉

[serebrov]

@jotoeri Which example do you mean here?

I am checking the demo and I see 9 emojis per line (except for the last example I added for #124 where perLine=5 and the picker also displays 5 emojis per line).

[jotoeri]

Hmm, thats interesting. Then it seems to be somehow dependent on the machine? 🤔
I see the first four (incl. the button-ones) pickers with 7 emojis, then the next three (filtered, i18n, custom) indeed with 9, and the new small one then with 4 emojis.
This as well on Firefox 88 as on Edge 90. Win10, 1920*1080px display 🤔

[serebrov]

@jotoeri Ah, yes, native emoji do depend on the local setup - in this case emojis are rendered with a local font provided by the operating system. So it can not only vary for different OSes, but can also be different depending on a set of fonts installed on the specific machine.

This "feature" is controlled by font-family definition for the native emoji:

font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji';

Maybe this can be tweaked to achieve a better result (but anyway, it is not possible to avoid end-user machine dependency here, see more information about this in the readme).

For the record, here is how the picker in demo app looks for me (Mac OS, Firefox and Chrome):

[serebrov]

Related: #71, #78.

[jotoeri]

Uhh, ok. So sorry, should probably have read a bit more. 🙈
So thank you for the explanation! :)