[Chat] Increase mention popover's z-index (#3526)

* Increase mention popover's z-index

* Change files

* Duplicate change files for beta release

Author: Leah-Xia-Microsoft

change-beta/@azure-communication-react-53c802f6-0258-42c6-a58c-405cb2e63b30.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Mention",
+  "comment": "Increase mention popover's z-index",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-53c802f6-0258-42c6-a58c-405cb2e63b30.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Mention",
+  "comment": "Increase mention popover's z-index",
+  "packageName": "@azure/communication-react",
+  "email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/styles/MentionPopover.style.ts

@@ -3,12 +3,6 @@
 
 import { IStackStyles, mergeStyles, Theme } from '@fluentui/react';
 
-/**
- * @private
- * z-index to ensure that chat container has lower z-index than mention popover
- */
-export const CHAT_CONTAINER_ZINDEX = 1;
-
 /**
  * @private
  */
@@ -17,8 +11,10 @@ export const mentionPopoverContainerStyle = (theme: Theme): string =>
     boxShadow: theme.effects.elevation16,
     background: theme.semanticColors.bodyBackground,
     overflow: 'visible',
-    // zIndex to set the mentionPopover above the chat container
-    zIndex: CHAT_CONTAINER_ZINDEX + 1
+    // zIndex to set the mentionPopover
+    // Temporary set to a hardcoded high number to make sure it is on top of the other components
+    // Will be replaced by a proper z-index solution after the Fluent 9 migration
+    zIndex: 10000
   });
 /**
  * @private