Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Correctly align messages in right to left languages #5453

Closed
aaronraimist wants to merge 4 commits into from
Closed

Correctly align messages in right to left languages #5453

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b320e37
Correctly align messages in right to left languages
aaronraimist Nov 29, 2020
2cbd1ad
Change mx_EventTile_body and mx_EventTile_content from span to div
aaronraimist Dec 1, 2020
136b55a
Fix tests
aaronraimist Dec 1, 2020
b8c7adc
Merge branch 'develop' into align-rtl-messages
aaronraimist Apr 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,8 @@ $left-gutter: 64px;

/* De-zalgoing */
.mx_EventTile_body {
text-align: start;
display: block;
Copy link
Collaborator

@jryans jryans Nov 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than changing mx_EventTile_body elements (which are spans) to display: block, it would be more straightforward to instead make them divs and get this for free.

It would also make sense to me to change mx_EventTile_content elements to divs as well, and remove their display: block style, so we are consistently using div vs. span for their intended meaning.

Copy link
Contributor Author

@aaronraimist aaronraimist Dec 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay I've changed them over to divs. This mostly works except it breaks the layout for edited messages and /me messages. I'm not sure how to fix this.

screenshots

Copy link
Collaborator

@jryans jryans Dec 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, hmm... 😖 Okay, I'll have to think about how we'd want to handle the edited case.

Copy link
Contributor

@ahangarha ahangarha Dec 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the issue with edited case?

Copy link
Contributor Author

@aaronraimist aaronraimist Dec 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the screenshot above. The (edited) label is in the wrong place.

Copy link
Contributor

@ahangarha ahangarha Dec 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not set its display to block and then text-align to start?

overflow-y: hidden;
}

Expand Down