Merge pull request #32 from microsoftgraph/next/mgt-chat

fix: set consistent spacing between mentioned people names (microsoftgraph#2970)
plasne · Jan 31, 2024 · c40f70f · c40f70f
2 parents 99b1ad3 + 4a285e1
commit c40f70f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/packages/mgt-chat/src/components/Chat/Chat.tsx b/packages/mgt-chat/src/components/Chat/Chat.tsx
@@ -76,29 +76,31 @@ const useStyles = makeStyles({
 const messageThreadStyles: MessageThreadStyles = {
   chatContainer: {
     '& .ui-box': {
-      zIndex: 'unset'
-    },
-    '& p': {
-      display: 'inline-flex',
-      justifyContent: 'center'
+      zIndex: 'unset',
+      '& div[data-ui-status]': {
+        display: 'inline-flex',
+        justifyContent: 'center'
+      }
     }
   },
   chatMessageContainer: {
     '& p>mgt-person,msft-mention': {
       display: 'inline-block',
-      ...shorthands.marginInline('0px', '2px')
+      ...shorthands.marginInline('0px')
     },
     '& .otherMention': {
-      color: 'var(--accent-base-color)'
+      color: 'var(--accent-base-color)',
+      ...shorthands.margin('0px')
     }
   },
   myChatMessageContainer: {
     '& p>mgt-person,msft-mention': {
       display: 'inline-block',
-      ...shorthands.marginInline('0px', '2px')
+      ...shorthands.marginInline('0px')
     },
     '& .otherMention': {
-      color: 'var(--accent-base-color)'
+      color: 'var(--accent-base-color)',
+      ...shorthands.margin('0px')
     }
   }
 };

diff --git a/packages/mgt-chat/src/utils/mentions.tsx b/packages/mgt-chat/src/utils/mentions.tsx
@@ -31,6 +31,7 @@ export const renderMGTMention = (chatState: GraphChatClient) => {
         </Person>
       );
     }
+    render = <>{render}&nbsp;</>;
     return render;
   };
 };