Last Seen: Fix adaptive width (#3547)

src/components/common/AvatarList.tsx

@@ -14,17 +14,19 @@ import styles from './AvatarList.module.scss';
 type OwnProps = {
   size: AvatarSize;
   peers?: (ApiUser | ApiChat)[];
+  className?: string;
 };
 
 const AvatarList: FC<OwnProps> = ({
   peers,
   size,
+  className,
 }) => {
   const lang = useLang();
 
   return (
     <div
-      className={buildClassName(styles.root, styles[`size-${size}`])}
+      className={buildClassName(className, styles.root, styles[`size-${size}`])}
       dir={lang.isRtl ? 'rtl' : 'ltr'}
     >
       {peers?.map((peer) => <Avatar size={size} peer={peer} className={styles.avatar} />)}

src/components/middle/message/MessageContextMenu.scss

@@ -46,31 +46,24 @@
     touch-action: none;
   }
 
-  &--seen-by {
-    width: 14rem !important;
+  &--seen-by-label-wrapper {
+    position: relative;
+    flex-grow: 1;
   }
 
   &--seen-by-label {
-    max-width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    right: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-align: initial;
   }
 
   .avatars {
-    display: flex;
-    align-self: center;
-    margin-inline-start: auto;
     padding-inline-start: 1rem;
-
-    .Avatar {
-      border: 0.0625rem solid var(--color-background);
-      margin-right: 0;
-      box-sizing: content-box;
-
-      &:not(:first-child) {
-        margin-left: -0.1875rem;
-      }
-    }
   }
 }
 

src/components/middle/message/MessageContextMenu.tsx

@@ -33,8 +33,8 @@ import Menu from '../../ui/Menu';
 import MenuItem from '../../ui/MenuItem';
 import MenuSeparator from '../../ui/MenuSeparator';
 import Skeleton from '../../ui/Skeleton';
-import Avatar from '../../common/Avatar';
 import ReactionSelector from './ReactionSelector';
+import AvatarList from '../../common/AvatarList';
 
 import './MessageContextMenu.scss';
 
@@ -389,36 +389,30 @@ const MessageContextMenu: FC<OwnProps> = ({
         {canReport && <MenuItem icon="flag" onClick={onReport}>{lang('lng_context_report_msg')}</MenuItem>}
         {(canShowSeenBy || canShowReactionsCount) && !isSponsoredMessage && (
           <MenuItem
-            className="MessageContextMenu--seen-by"
             icon={canShowReactionsCount ? 'heart-outline' : 'group'}
             onClick={canShowReactionsCount ? onShowReactors : onShowSeenBy}
             disabled={!canShowReactionsCount && !seenByDatesCount}
           >
-            <span className="MessageContextMenu--seen-by-label">
-              {canShowReactionsCount && message.reactors?.count ? (
-                canShowSeenBy && seenByDatesCount
-                  ? lang(
-                    'Chat.OutgoingContextMixedReactionCount',
-                    [message.reactors.count, seenByDatesCount],
-                  )
-                  : lang('Chat.ContextReactionCount', message.reactors.count, 'i')
-              ) : (
-                seenByDatesCount === 1 && seenByRecentUsers
-                  ? renderText(getUserFullName(seenByRecentUsers[0])!)
-                  : (seenByDatesCount
-                    ? lang('Conversation.ContextMenuSeen', seenByDatesCount, 'i')
-                    : lang('Conversation.ContextMenuNoViews')
-                  )
-              )}
+            <span className="MessageContextMenu--seen-by-label-wrapper">
+              <span className="MessageContextMenu--seen-by-label" dir={lang.isRtl ? 'rtl' : undefined}>
+                {canShowReactionsCount && message.reactors?.count ? (
+                  canShowSeenBy && seenByDatesCount
+                    ? lang(
+                      'Chat.OutgoingContextMixedReactionCount',
+                      [message.reactors.count, seenByDatesCount],
+                    )
+                    : lang('Chat.ContextReactionCount', message.reactors.count, 'i')
+                ) : (
+                  seenByDatesCount === 1 && seenByRecentUsers
+                    ? renderText(getUserFullName(seenByRecentUsers[0] as ApiUser)!) : (
+                      seenByDatesCount
+                        ? lang('Conversation.ContextMenuSeen', seenByDatesCount, 'i')
+                        : lang('Conversation.ContextMenuNoViews')
+                    )
+                )}
+              </span>
             </span>
-            <div className="avatars">
-              {seenByRecentUsers?.map((user) => (
-                <Avatar
-                  size="micro"
-                  peer={user}
-                />
-              ))}
-            </div>
+            <AvatarList className="avatars" size="micro" peers={seenByRecentUsers} />
           </MenuItem>
         )}
         {canDelete && <MenuItem destructive icon="delete" onClick={onDelete}>{lang('Delete')}</MenuItem>}