Make the pill on the basic message composer compatible with display n…

…ame in RTL languages (matrix-org#8758)
JanBurp · Jun 14, 2022 · 767d20c · 767d20c
1 parent f3c176d
commit 767d20c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss
@@ -48,8 +48,8 @@ limitations under the License.
 
     &::before,
     .mx_BaseAvatar {
-        margin-left: -0.3em; // Otherwise the gap is too large
-        margin-right: 0.2em;
+        margin-inline-start: -0.3em; // Otherwise the gap is too large
+        margin-inline-end: 0.2em;
     }
 
     a& {

diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -51,7 +51,9 @@ limitations under the License.
         }
 
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
-            span.mx_UserPill, span.mx_RoomPill, span.mx_SpacePill {
+            span.mx_UserPill,
+            span.mx_RoomPill,
+            span.mx_SpacePill {
                 user-select: all;
                 position: relative;
                 cursor: unset; // We don't want indicate clickability
@@ -66,7 +68,7 @@ limitations under the License.
                     content: var(--avatar-letter);
                     width: $font-16px;
                     height: $font-16px;
-                    margin-right: 0.24rem;
+                    margin-inline-end: 0.24rem;
                     background: var(--avatar-background), $background;
                     color: $avatar-initial-color;
                     background-repeat: no-repeat;