fix(NcAppNavigation + NcUserBubble + NcRichContenteditable): RTL support

[DorraJaouad]

☑️ Resolves

• Many other components will need to be adjusted as well later.

Another issue to keep in mind: NcRichContenteditable is used with dir="auto" in Talk and is attached to the div with "_input" class. While we need to make a space for the emoji picker, the spacing is not adjusted to the RTL direction and it remains on the left side. We probably need to take the padding logic (and others) out of the _input class and put it in the wrapper class rich-contenteditable to follow the implemented language direction.

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[Antreesy]

Another issue to keep in mind: NcRichContenteditable is used with dir="auto" in Talk and is attached to the div with "_input" class. While we need to make a space for the emoji picker, the spacing is not adjusted to the RTL direction and it remains on the left side.

But... I did that... 1e5eadd
Just drop dir="auto"

We probably need to take the padding logic (and others) out of the _input class and put it in the wrapper class rich-contenteditable to follow the implemented language direction.

Not sure that's wise. _input is rich element, with hover effects. wrapper is just to position optional label

[DorraJaouad]

dir="auto"

It's better to be kept, as it's user input and it will be strange to write in the opposite direction. Also, other apps have auto in the messages input.

[Antreesy]

Then it should be handled upstream only if NcRichContenteditable will have a slot for leading / trailing icon.
Currently it's hacked in Talk, and therefore should be handled by Talk. As was discussed privately, we can work around paddings with CSS

[ShGKme]

/backport to next