Message: Fix avatar size on mobile jumping to smaller on load (#2670)

src/components/common/Avatar.scss

@@ -74,6 +74,17 @@
     }
   }
 
+  &.size-small-mobile {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 0.875rem;
+
+    .emoji {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
   &.size-medium {
     width: 2.75rem;
     height: 2.75rem;

src/components/common/Avatar.tsx

@@ -45,7 +45,7 @@ cn.icon = cn('icon');
 
 type OwnProps = {
   className?: string;
-  size?: 'micro' | 'tiny' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo';
+  size?: 'micro' | 'tiny' | 'mini' | 'small' | 'small-mobile' | 'medium' | 'large' | 'jumbo';
   chat?: ApiChat;
   user?: ApiUser;
   photo?: ApiPhoto;

src/components/middle/message/Message.scss

@@ -64,11 +64,6 @@
     left: 0;
 
     margin-right: 0.3125rem;
-
-    @media (max-width: 600px) {
-      width: 2.5rem;
-      height: 2.5rem;
-    }
   }
 
   .quick-reaction {

src/components/middle/message/Message.tsx

@@ -691,7 +691,7 @@ const Message: FC<OwnProps & StateProps> = ({
 
     return (
       <Avatar
-        size="small"
+        size={isMobile ? 'small-mobile' : 'small'}
         user={avatarUser}
         chat={avatarChat}
         text={hiddenName}