From 4c718c4b9ac3dde7f80d8a83fc0bbdec83df9d3b Mon Sep 17 00:00:00 2001
From: Mattermost Build <build@mattermost.com>
Date: Thu, 14 Aug 2025 12:30:01 +0300
Subject: [PATCH] [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>
---
 .../post_profile_picture.tsx                  |  2 +-
 .../src/components/profile_picture/index.tsx  |  4 ++--
 .../widgets/users/avatar/avatar.tsx           | 22 +++++++++----------
 .../channels/src/sass/components/_post.scss   |  8 ++-----
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx b/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx
index a4a61c94b6..4b2cb1f52c 100644
--- a/webapp/channels/src/components/post_profile_picture/post_profile_picture.tsx
+++ b/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}
diff --git a/webapp/channels/src/components/profile_picture/index.tsx b/webapp/channels/src/components/profile_picture/index.tsx
index 9669725485..0999bdf387 100644
--- a/webapp/channels/src/components/profile_picture/index.tsx
+++ b/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'),
                 }}
             >
                 <>
diff --git a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx b/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
index d784c1f3ce..dfbcffdd77 100644
--- a/webapp/channels/src/components/widgets/users/avatar/avatar.tsx
+++ b/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 = {
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index c2fac3d640..999a21389e 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/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;