Message / Reactions: Fix layout (#2940)

src/components/common/AnimatedCounter.tsx

@@ -5,6 +5,7 @@ import React, {
 import { getGlobal } from '../../global';
 
 import { ANIMATION_LEVEL_MAX } from '../../config';
+import buildClassName from '../../util/buildClassName';
 import useLang from '../../hooks/useLang';
 import useFlag from '../../hooks/useFlag';
 
@@ -12,10 +13,12 @@ import styles from './AnimatedCounter.module.scss';
 
 type OwnProps = {
   text: string;
+  className?: string;
 };
 
 const AnimatedCounter: FC<OwnProps> = ({
   text,
+  className,
 }) => {
   const lang = useLang();
 
@@ -59,7 +62,7 @@ const AnimatedCounter: FC<OwnProps> = ({
   }, [text]);
 
   return (
-    <span className={styles.root} dir={lang.isRtl ? 'rtl' : undefined}>
+    <span className={buildClassName(styles.root, className)} dir={lang.isRtl ? 'rtl' : undefined}>
       {textElement}
     </span>
   );

src/components/middle/message/ReactionAnimatedEmoji.module.scss

@@ -8,12 +8,12 @@
 
   width: 1.75rem;
   height: 1.75rem;
-  margin-right: 0.125rem;
+  margin-inline-end: 0.125rem;
 
   z-index: 1;
 
   &.is-custom-emoji {
-    margin-right: 0.375rem;
+    margin-inline-end: 0.375rem;
   }
 }
 

src/components/middle/message/ReactionButton.tsx

@@ -78,7 +78,7 @@ const ReactionButton: FC<{
         <div className="avatars">
           {recentReactors.map((user) => <Avatar user={user} size="micro" />)}
         </div>
-      ) : <AnimatedCounter text={formatIntegerCompact(reaction.count)} />}
+      ) : <AnimatedCounter text={formatIntegerCompact(reaction.count)} className="counter" />}
     </Button>
   );
 };

src/components/middle/message/Reactions.scss

@@ -33,7 +33,8 @@
       display: flex;
 
       .Avatar {
-        margin: 0 0 0 -0.25rem;
+        margin: 0;
+        margin-inline-start: -0.25rem;
         border: 0.0625rem solid var(--reaction-background);
         width: 1.5rem;
         height: 1.5rem;
@@ -50,16 +51,20 @@
       z-index: 1;
     }
 
+    .counter {
+      margin-inline-end: 0.125rem;
+    }
+
     &:hover {
       --reaction-background: var(--hover-color-reaction);
     }
 
     &:first-of-type {
-      margin-left: 0;
+      margin-inline-start: 0;
     }
 
     &:last-of-type {
-      margin-right: 0;
+      margin-inline-end: 0;
     }
   }
 
@@ -72,13 +77,13 @@
 
     .Button {
       &:first-of-type {
-        margin-left: 0.125rem;
+        margin-inline-start: 0.125rem;
-        margin-right: 0;
+        margin-inline-end: 0;
       }
 
       &:last-of-type {
-        margin-right: 0.125rem;
+        margin-inline-end: 0.125rem;
-        margin-left: 0;
+        margin-inline-start: 0;
       }
     }
   }

src/components/middle/message/Reactions.tsx

@@ -7,6 +7,7 @@ import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
 
 import { getReactionUniqueKey } from '../../../global/helpers';
 import buildClassName from '../../../util/buildClassName';
+import useLang from '../../../hooks/useLang';
 
 import ReactionButton from './ReactionButton';
 
@@ -37,6 +38,8 @@ const Reactions: FC<OwnProps> = ({
   observeIntersection,
   noRecentReactors,
 }) => {
+  const lang = useLang();
+
   const totalCount = useMemo(() => (
     message.reactions!.results.reduce((acc, reaction) => acc + reaction.count, 0)
   ), [message]);
@@ -45,6 +48,7 @@ const Reactions: FC<OwnProps> = ({
     <div
       className={buildClassName('Reactions', isOutside && 'is-outside')}
       style={maxWidth ? `max-width: ${maxWidth}px` : undefined}
+      dir={lang.isRtl ? 'rtl' : 'ltr'}
     >
       {message.reactions!.results.map((reaction) => (
         <ReactionButton