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 {
+  &--seen-by-label-wrapper {
-    width: 14rem !important;
+    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,12 +389,12 @@ 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">
+            <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(
@@ -404,21 +404,15 @@ const MessageContextMenu: FC<OwnProps> = ({
                     : lang('Chat.ContextReactionCount', message.reactors.count, 'i')
                 ) : (
                   seenByDatesCount === 1 && seenByRecentUsers
-                  ? renderText(getUserFullName(seenByRecentUsers[0])!)
+                    ? renderText(getUserFullName(seenByRecentUsers[0] as ApiUser)!) : (
-                  : (seenByDatesCount
+                      seenByDatesCount
                         ? lang('Conversation.ContextMenuSeen', seenByDatesCount, 'i')
                         : lang('Conversation.ContextMenuNoViews')
                     )
                 )}
               </span>
-            <div className="avatars">
+            </span>
-              {seenByRecentUsers?.map((user) => (
+            <AvatarList className="avatars" size="micro" peers={seenByRecentUsers} />
-                <Avatar
-                  size="micro"
-                  peer={user}
-                />
-              ))}
-            </div>
           </MenuItem>
         )}
         {canDelete && <MenuItem destructive icon="delete" onClick={onDelete}>{lang('Delete')}</MenuItem>}