[MM-63579] Missing status indicator in compact display mode (#33651) (#33716)

(cherry picked from commit 573c78481ead916e5925836fa1e992456cb671c5)

Co-authored-by: M-ZubairAhmed <m-zubairahmed@protonmail.com>

webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx

@@ -100,7 +100,7 @@ export default class PostProfilePicture extends React.PureComponent<Props> {
 
         return (
             <ProfilePicture
-                size='md'
+                size={this.props.compactDisplay ? 'inherit' : 'md'}
                 src={src}
                 profileSrc={profileSrc}
                 isEmoji={isEmoji}

webapp/channels/src/components/profile_picture/index.tsx

@@ -53,8 +53,8 @@ function ProfilePicture(props: Props) {
                 triggerComponentAs='button'
                 triggerComponentStyle={{
                     borderRadius: '50%',
-                    width: `${getAvatarWidth(props?.size ?? 'md')}px`,
-                    height: `${getAvatarWidth(props?.size ?? 'md')}px`,
+                    width: getAvatarWidth(props?.size ?? 'md'),
+                    height: getAvatarWidth(props?.size ?? 'md'),
                 }}
             >
                 <>

webapp/channels/src/components/widgets/users/avatar/avatar.tsx

@@ -12,30 +12,30 @@ import BotDefaultIcon from 'images/bot_default_icon.png';
 
 import './avatar.scss';
 
-export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl-custom-GM' | 'xl-custom-DM' | 'xxl';
+export type TAvatarSizeToken = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl-custom-GM' | 'xl-custom-DM' | 'xxl' | 'inherit';
 
 export const getAvatarWidth = (size: TAvatarSizeToken) => {
     switch (size) {
     case 'xxs':
-        return 16;
+        return '16px';
     case 'xs':
-        return 20;
+        return '20px';
     case 'sm':
-        return 24;
+        return '24px';
     case 'md':
-        return 32;
+        return '32px';
     case 'lg':
-        return 36;
+        return '36px';
     case 'xl':
-        return 50;
+        return '50px';
     case 'xl-custom-GM':
-        return 72;
+        return '72px';
     case 'xl-custom-DM':
-        return 96;
+        return '96px';
     case 'xxl':
-        return 128;
+        return '128px';
     }
-    return 0;
+    return 'inherit';
 };
 
 type Props = {

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

@@ -749,10 +749,8 @@
 
         .post__img {
             width: 16px;
-            padding-top: 1px;
 
-            img,
-            button {
+            .profile-icon {
                 display: none;
             }
         }
@@ -807,11 +805,9 @@
         }
 
         .status-wrapper {
-            height: 14px;
-
             .status {
                 position: relative;
-                top: auto;
+                top: 1px;
                 right: auto;
                 bottom: auto;
                 left: -2px;