Use CSS classes to style mgt elements with disambiguation

microsoftgraph · Feb 7, 2024 · 288dbf9 · 288dbf9
1 parent 5c44ae9
commit 288dbf9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/mgt-chat/src/components/Chat/Chat.tsx b/packages/mgt-chat/src/components/Chat/Chat.tsx
@@ -84,7 +84,7 @@ const messageThreadStyles: MessageThreadStyles = {
     }
   },
   chatMessageContainer: {
-    '& p>mgt-person,msft-mention': {
+    '& p>.mgt-person-mention,msft-mention': {
       display: 'inline-block',
       ...shorthands.marginInline('0px')
     },
@@ -94,7 +94,7 @@ const messageThreadStyles: MessageThreadStyles = {
     }
   },
   myChatMessageContainer: {
-    '& p>mgt-person,msft-mention': {
+    '& p>.mgt-person-mention,msft-mention': {
       display: 'inline-block',
       ...shorthands.marginInline('0px')
     },

diff --git a/packages/mgt-chat/src/utils/mentions.tsx b/packages/mgt-chat/src/utils/mentions.tsx
@@ -25,7 +25,7 @@ export const renderMGTMention = (chatState: GraphChatClient) => {
       };
       const MgtMention = me ? MgtMeMention : MgtOtherMention;
       render = (
-        <Person userId={user?.id} personCardInteraction="hover">
+        <Person className="mgt-person-mention" userId={user?.id} personCardInteraction="hover">
           <MgtMention />
         </Person>
       );