RTL: overlap in bottom panel/skin selector

[rugk]

Bug description

As reported by @shanirub in #62 (comment):

The small circle that represents the skin tone overlaps the text "Awesome Emoji" [in a RTL language].

Steps to reproduce

1. (Use a version with the Hebrew or another RTL language translation.)
2. Choose that language in the settings of Firefox.
3. Restart Firefox.
4. Open emoji picker.

Actual behavior

Expected behavior

• emoji should be at the right
• skin selector should be on the left

System

Operating system and version: Fedora 30
Browser and version: Firefox 69
Add-on version: dev (master)

Possible solution

likely CSS

Related issue: #64

[rugk]

I've tried to reproduce this on the website of the used lib, i.e. https://missive.github.io/emoji-mart/, but it does work better there, strangely… 🤔

The text is left aligned (although the … there has problems), but at least it does not overlap the emoji picker there, so…

So, anyway, I've reported this upstream at missive/emoji-mart#370.
I am not yet 100% sure, whether the actual overlapping is caused, because of the RTL text actually being used in there, or because of a change in this add-on. (particularly this CSS thing could be a problem).

---

In any case, as in #64, I am marking this as "help wanted", because if anyone has experience with RTL/LTR text and issues like, we could take some suggestions/need solutions (or even PRs 😉) here…
Some workarounds for now would also be fine, but I don't know what is the best and reasonable way now.