Improve emote autocomplete keyboard navigation

Requirements

Filling out the below template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.

Description of the Change

In the emote autocomplete menu, changes the up and down keys to behave similarly to in a text editor, where they go up and down rows.

Specifically, the up/down keys will go up/down a row, except if they are at the most extreme row in that direction, in which case they will go to either the first or last emote of that row (first for up, last for down). If they are already at their respective most extreme emote, they will go to the opposite extreme (e.g. pressing up at the first emote will send the selector to the last emote).

There is also a minor visual change to align emotes in the autocomplete menu into distinct rows. This is not noticeable unless you look for it, and the emotes not being in distinct rows was probably an unnoticed bug in the first place. This is a CSS change only, and not a DOM change.

Benefits

This behavior is more intuitive than before and allows for easier access to desired emotes in the emote autocomplete menu.

Possible Drawbacks

Calls getBoundingClientRect several times per up/down button press, which causes reflow and could hurt performance. However, there has been no visible performance hit of any kind in my testing.

Applicable Issues

None

Note: Please be aware that we may require changes (in code or in the UI) if we believe they are required to meet the vision and standards of Elixr. Don't take suggestions for tweaks personally, we are all simply trying to make Elixr the best that it can be :)

crowbartools / MixrElixr