[MM-58274] No side padding in plugins section of user profile popover (#27084)

webapp/channels/src/components/profile_popover/profile_popover.scss

@@ -167,6 +167,13 @@
             }
         }
 
+        .user-profile-popover-pluggables {
+            &:not(:empty) {
+                padding: 0 16px 12px 16px;
+                @include textEllipsis;
+            }
+        }
+
         .user-popover__custom-status {
             display: flex;
             align-items: center;

webapp/channels/src/components/profile_popover/profile_popover.tsx

@@ -37,6 +37,7 @@ import ProfilePopoverTitle from './profile_popover_title';
 
 import './profile_popover.scss';
 
+const PLUGGABLE_COMPONENT_NAME_PROFILE_POPOVER = 'PopoverUserAttributes';
 export interface Props {
     userId: string;
     src: string;
@@ -49,11 +50,6 @@ export interface Props {
     overwriteName?: string;
 }
 
-function getDefaultChannelId(state: GlobalState) {
-    const selectedPost = getSelectedPost(state);
-    return selectedPost.exists ? selectedPost.channel_id : getCurrentChannelId(state);
-}
-
 /**
  * The profile popover, or hover card, that appears with user information when clicking
  * on the username, profile picture of a user, or others.
@@ -183,13 +179,15 @@ const ProfilePopover = ({
                     haveOverrideProp={haveOverrideProp}
                     isBot={user.is_bot}
                 />
-                <Pluggable
+                <div className='user-profile-popover-pluggables'>
-                    pluggableName='PopoverUserAttributes'
+                    <Pluggable
-                    user={user}
+                        pluggableName={PLUGGABLE_COMPONENT_NAME_PROFILE_POPOVER}
-                    hide={hide}
+                        user={user}
-                    status={hideStatus ? null : status}
+                        hide={hide}
-                    fromWebhook={fromWebhook}
+                        status={hideStatus ? null : status}
-                />
+                        fromWebhook={fromWebhook}
+                    />
+                </div>
                 <ProfilePopoverTimezone
                     currentUserTimezone={currentUserTimezone}
                     profileUserTimezone={user.timezone}
@@ -239,4 +237,9 @@ const ProfilePopover = ({
     );
 };
 
+function getDefaultChannelId(state: GlobalState) {
+    const selectedPost = getSelectedPost(state);
+    return selectedPost.exists ? selectedPost.channel_id : getCurrentChannelId(state);
+}
+
 export default React.memo(ProfilePopover);