Commit afa9f64
authored
Fix of wrong alignment with mixed RTL and LTR text (#743)
<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->
### 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
- [x] 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:
- [x] My code follows the style guidelines of this project
- [x] 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
- [x] 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).
<!-- No AI was used in the creation of this code. -->4 files changed
Lines changed: 9 additions & 1 deletion
File tree
- .changeset
- src/app/components/message
- layout
Lines changed: 5 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
292 | 292 | | |
293 | 293 | | |
294 | 294 | | |
295 | | - | |
| 295 | + | |
296 | 296 | | |
297 | 297 | | |
298 | 298 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
48 | 48 | | |
49 | 49 | | |
50 | 50 | | |
| 51 | + | |
51 | 52 | | |
52 | 53 | | |
53 | 54 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
229 | 229 | | |
230 | 230 | | |
231 | 231 | | |
| 232 | + | |
| 233 | + | |
232 | 234 | | |
233 | 235 | | |
234 | 236 | | |
| |||
0 commit comments