Fix mod menu showing. Closes #1990

web/components/chat/ChatContainer/ChatContainer.tsx

@@ -87,6 +87,7 @@ export default function ChatContainer(props: Props) {
             highlightString={usernameToHighlight} // What to highlight in the message
             sentBySelf={message.user?.id === chatUserId} // The local user sent this message
             sameUserAsLast={isSameUserAsLast(messages, index)}
+            isAuthorModerator={(message as ChatMessage).user.scopes.includes('MODERATOR')}
             key={message.id}
           />
         );

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -1,6 +1,7 @@
 .root {
   * {
-    z-index: 100; }
+    z-index: 100;
+  }
   position: relative;
   font-size: 0.9rem;
   padding: 5px 15px 5px 5px;
@@ -10,9 +11,6 @@
     align-items: center;
     font-family: var(--theme-header-font-family);
     font-weight: bold;
-    .userName {
-      margin-left: 0.3rem;
-    }
   }
   .message {
     color: var(--theme-text-primary);

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -16,6 +16,7 @@ interface Props {
   highlightString: string;
   sentBySelf: boolean;
   sameUserAsLast: boolean;
+  isAuthorModerator: boolean;
 }
 
 export default function ChatUserMessage({
@@ -24,6 +25,7 @@ export default function ChatUserMessage({
   showModeratorMenu,
   sentBySelf, // Move the border to the right and render a background
   sameUserAsLast,
+  isAuthorModerator,
 }: Props) {
   const { body, user, timestamp } = message;
   const { displayName, displayColor } = user;
@@ -47,8 +49,8 @@ export default function ChatUserMessage({
       >
         {!sameUserAsLast && (
           <div className={s.user} style={{ color }}>
-            {showModeratorMenu && <ModIcon />}
             <span className={s.userName}>{displayName}</span>
+            {isAuthorModerator && <ModIcon />}
           </div>
         )}
         <Highlight search={highlightString}>

web/stories/ChatUserMessage.stories.tsx

@@ -85,6 +85,7 @@ export const FromModeratorUser = Template.bind({});
 FromModeratorUser.args = {
   message: moderatorMessage,
   showModeratorMenu: false,
+  isAuthorModerator: true,
 };
 
 export const FromAuthenticatedUser = Template.bind({});