[MM-51489]: Fix issue with compact message mode (#22711)

Automatic Merge

webapp/channels/src/components/post/post_component.tsx

@@ -254,16 +254,16 @@ const PostComponent = (props: Props): JSX.Element => {
             'current--user': props.currentUserId === post.user_id && !isSystemMessage,
             'post--system': isSystemMessage || isMeMessage,
             'post--root': props.hasReplies && !(post.root_id && post.root_id.length > 0),
-            'post--comment': post.root_id && post.root_id.length > 0 && !props.isCollapsedThreadsEnabled,
+            'post--comment': (post.root_id && post.root_id.length > 0 && !props.isCollapsedThreadsEnabled) || (props.location === Locations.RHS_COMMENT),
             'post--compact': props.compactDisplay,
             'post--hovered': hovered,
-            'same--user': props.isConsecutivePost && !props.compactDisplay,
+            'same--user': props.isConsecutivePost && (!props.compactDisplay || props.location === Locations.RHS_COMMENT),
             'cursor--pointer': alt && !props.channelIsArchived,
             'post--hide-controls': post.failed || post.state === Posts.POST_DELETED,
             'post--comment same--root': fromAutoResponder,
             'post--pinned-or-flagged': (post.is_pinned || props.isFlagged) && props.location === Locations.CENTER,
             'mention-comment': props.isCommentMention,
-            'post--thread': props.location === Locations.RHS_COMMENT || Locations.RHS_ROOT,
+            'post--thread': props.location === Locations.RHS_COMMENT || props.location === Locations.RHS_ROOT,
         });
     };
 
@@ -378,7 +378,8 @@ const PostComponent = (props: Props): JSX.Element => {
 
     let profilePic;
     const hideProfilePicture = hasSameRoot(props) && (!post.root_id && !props.hasReplies) && !PostUtils.isFromBot(post);
-    if (!hideProfilePicture) {
+    const hideProfileCase = !(props.location === Locations.RHS_COMMENT && props.compactDisplay && props.isConsecutivePost);
+    if (!hideProfilePicture && hideProfileCase) {
         profilePic = (
             <PostProfilePicture
                 compactDisplay={props.compactDisplay}
@@ -528,7 +529,7 @@ const PostComponent = (props: Props): JSX.Element => {
                                 isSystemMessage={isSystemMessage}
                             />
                             <div className='col d-flex align-items-center'>
-                                {
+                                {((!hideProfilePicture && props.location === Locations.CENTER) || hover || props.location !== Locations.CENTER) &&
                                     <PostTime
                                         isPermalink={!(Posts.POST_DELETED === post.state || isPostPendingOrFailed(post))}
                                         eventTime={post.create_at}

webapp/channels/src/components/post/post_options.tsx

@@ -19,6 +19,7 @@ import CommentIcon from 'components/common/comment_icon';
 
 import {Emoji} from '@mattermost/types/emojis';
 import {Post} from '@mattermost/types/posts';
+import classnames from 'classnames';
 
 type Props = {
     post: Post;
@@ -235,7 +236,7 @@ const PostOptions = (props: Props): JSX.Element => {
             <div
                 ref={dotMenuRef}
                 data-testid={`post-menu-${props.post.id}`}
-                className='col post-menu'
+                className={classnames('col post-menu', {'post-menu--position': !hoverLocal && showCommentIcon})}
             >
                 {!collapsedThreadsEnabled && !showRecentlyUsedReactions && dotMenu}
                 {showRecentReactions}

webapp/channels/src/sass/components/_post-right.scss

@@ -79,6 +79,8 @@
         }
 
         &.post--compact {
+            padding-left: 1em;
+
             .post__body {
                 padding-left: 0;
             }
@@ -102,7 +104,7 @@
             &.same--user {
                 .post__header {
                     .col__name {
-                        display: inline-block;
+                        display: flex;
                     }
                 }
             }

webapp/channels/src/sass/components/_post.scss

@@ -2395,8 +2395,7 @@
 
 .post.current--user {
     &.other--root,
-    &.post--root,
-    &.post--comment {
+    &.post--root, {
         .post__header-set-custom-status {
             display: revert;
             padding: 0 6px;

webapp/channels/src/sass/responsive/_tablet.scss

@@ -292,6 +292,8 @@
                 .post__permalink {
                     position: absolute;
                     top: 1px;
+                    left: -76px;
+                    width: 60px;
                     text-align: right;
                 }
 
@@ -355,6 +357,10 @@
                         .post__header {
                             .post-menu {
                                 top: -34px;
+
+                                &.post-menu--position {
+                                    top: -12px;
+                                }
                             }
                         }
                     }