imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix alignment of RTL messages (#12837)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

1
res/css/views/messages/_MEmoteBody.pcss
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_MEmoteBody {
white-space: pre-wrap;
text-align: start;
}
.mx_MEmoteBody_sender {

7
res/css/views/rooms/_EventTile.pcss
View file

@ -43,6 +43,7 @@ $left-gutter: 64px;
.mx_EventTile_body {
overflow-y: hidden;
text-align: start;
}
.mx_EventTile_receiptSent,
@ -676,7 +677,7 @@ $left-gutter: 64px;
font-size: $font-12px;
color: $secondary-content;
display: inline-block;
margin-left: 9px;
margin-inline-start: 9px;
}
.mx_EventTile_edited {
@ -1443,6 +1444,10 @@ $left-gutter: 64px;
}
}
.mx_EventTile_annotated {
display: flex;
}
/* Media query for mobile UI */
@media only screen and (max-width: 480px) {
.mx_EventTile_content {