Special characters in nested collections rendered in RTL order in the "Select collection" dialog

[chriseskow]

Describe the bug
If you have a nested collection containing special (e.g. non-alphanumeric) characters at the end of the collection name, those characters will be reversed and moved to the beginning of the full collection path when you navigate to that collection in the "Select collection" dialog box.

This also appears to cause special characters at the beginning of the top-most collection to be moved to the end of the full path, again in reverse order.

A good real world example would be the the collection path Dev / Languages / C++. In the Select Collection dialog, this path appears as ++Dev / Languages / C:

This appears to be caused by direction: rtl CSS property in src/co/collections/item/title.module.styl. I'm not sure why that property is set, but removing it in the browser dev tools appears to fix the issue.

To Reproduce
Steps to reproduce the behavior:

1. Create two collections !@foo and bar#$, the second nested within the first as per the screenshot below.
2. Select a bookmark, and click the collection dropdown to open the "Select collection" dialog.
3. Navigate to or search for the new bar#$ collection.
4. Note that the special characters are reversed, as in the screenshot below.

Expected behavior
The collection path should appear as !@foo / bar#$.

Screenshots

Collections with special characters:

How they appear in "Select collection":

Desktop (please complete the following information):

• OS: macOS
• Browser: Firefox
• Version: 130