Fix of wrong alignment with mixed RTL and LTR text

[sinasadeghi83]

Description

This PR resolves formatting and alignment issues with mixed RTL (Right-to-Left) and LTR (Left-to-Right) text within messages. Previously, mixed text direction caused display inconsistencies in the main message body and the reply content area.

Changes made:

• Added dir="auto" to the base message Text component, allowing the browser to automatically determine the base text direction according to the first strongly-typed character of the message.
• Applied unicode-bidi: plaintext to the message content CSS and the Text component inside the reply content. This ensures the browser dynamically evaluates and handles the text direction based on the actual characters used rather than inheriting the container's direction.
• Set align-self: start on the message content. This ensures that even for RTL messages, the content block anchors appropriately to the left side (start) of the view, while still preserving the correct internal text direction.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

AI disclosure:

• Partially AI assisted (clarify which code was AI assisted and briefly explain what it does).
• Fully AI generated (explain what all the generated code does in moderate detail).

[Copilot]

Pull request overview

This PR addresses display issues when message content contains a mix of RTL and LTR text by ensuring text direction is resolved from the actual characters rather than inherited container direction, and by adjusting how the message text block aligns within its layout.

Changes:

• Applied unicode-bidi: plaintext to message body styling so mixed-direction text is rendered with correct bidirectional behavior.
• Applied unicode-bidi: plaintext to the reply preview Text component to keep reply content directionally correct.
• Added align-self: start to the main message text body recipe to stabilize content alignment in mixed RTL/LTR scenarios.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/app/components/message/Reply.tsx	Adds unicode-bidi: plaintext to reply preview text rendering to improve mixed RTL/LTR display.
src/app/components/message/layout/layout.css.ts	Updates the message text body recipe to use unicode-bidi: plaintext and align-self: start for better mixed-direction formatting/alignment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[7w1]

Hey, thanks for contributing! Could you write a changeset as described here?

[AmirAref]

Just as a user who needed this feature a lot, first I want to say thank you.
I have a suggestion to consider, wouldn't it be better to display RTL text starting from the right side of the row? I think it would be easier to read for RTL language readers (like Persian).
Here is an example of what I mean:

Current state:

RTL text aligned to the right:

@sinasadeghi83

[hazre]

I like @AmirAref's suggestion

[sinasadeghi83]

Just as a user who needed this feature a lot, first I want to say thank you. I have a suggestion to consider, wouldn't it be better to display RTL text starting from the right side of the row? I think it would be easier to read for RTL language readers (like Persian). Here is an example of what I mean:

It's against proximity principle in visual design. Texts can't be too far from profile name and profile image because then you have to roll your eyes all to the left to see who sent the message. Think about this scenario when you are reading a chain of messages from Alice then suddenly Bob sends a new message, then at first you may assume that Alice is the sender because you haven't seen the sender name or profile image yet. Then after reading the whole message to the end, you find out that Alice couldn't be the sender. You roll your eyes to the left and see that oh it's Bob!
But when message body is close to profile name and image, you would see sender before their message content.
Other messaging apps follow the same design too.

[sinasadeghi83]

Hey, thanks for contributing! Could you write a changeset as described here?

You're welcome. It's done.

[AmirAref]

Just as a user who needed this feature a lot, first I want to say thank you. I have a suggestion to consider, wouldn't it be better to display RTL text starting from the right side of the row? I think it would be easier to read for RTL language readers (like Persian). Here is an example of what I mean:

It's against proximity principle in visual design. Texts can't be too far from profile name and profile image because then you have to roll your eyes all to the left to see who sent the message. Think about this scenario when you are reading a chain of messages from Alice then suddenly Bob sends a new message, then at first you may assume that Alice is the sender because you haven't seen the sender name or profile image yet. Then after reading the whole message to the end, you find out that Alice couldn't be the sender. You roll your eyes to the left and see that oh it's Bob! But when message body is close to profile name and image, you would see sender before their message content. Other messaging apps follow the same design too.

Yeah, you're right. I think this would be handled greatly by changing message layout to Bubble and enable Right Aligned Bubbles in General settings of Sable.