Fix alignment of RTL messages (#12837)

* Fix alignment of RTL messages

Inspired by https://github.com/matrix-org/matrix-react-sdk/pull/5453 but
hopefully with the edited marker in the right place.

This is a PoC: types aren't correct and the style needs pulling
out to a class. Plus it would probably need more visual tests added.
If this looks acceptable, I can make these changes.

* Fix spacing between text and edited annotation

* Update snapshot

* Update more snapshots

* More snapshots

* More more snapshots

* Split out style

* Fix emotes

This will cause them always be right-justified if the display name
is rtl.

* Add playwright test for ltr/rtl message rendering

* Better snapshots

* Await on message sending

* Better waiting, hopefully

* Old snapshot files

* Really hopefully fixed screenshots this time

* Don't include the message action bar in the screenshots
This commit is contained in:
David Baker 2024-07-31 23:23:46 +01:00 committed by GitHub
parent f3ac6692da
commit a0c029c3c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 242 additions and 79 deletions

View file

@ -101,12 +101,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -217,12 +217,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -333,12 +333,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"

View file

@ -244,12 +244,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -360,12 +360,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -476,12 +476,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"