Fix PIPIP overlap in chat pane (#1674)

* increase the z-index of the pipip

* Move zIndex manipulation closer

* Change files

* removed unused import

* add missing jsdoc comment

* move getPipStyles to a better file.

Co-authored-by: Prathmesh Prabhu <82062616+prprabhu-ms@users.noreply.github.com>

Author: dmceachernmsft

change/@internal-react-composites-58107184-290f-4d15-9551-158713037a17.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix styles so that the PIPIP shows over the content in the people and chat panes on mobile.",
+  "packageName": "@internal/react-composites",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { IStackStyles, IStackTokens, Stack } from '@fluentui/react';
+import { IStackStyles, IStackTokens, ITheme, Stack } from '@fluentui/react';
 import { ParticipantMenuItemsCallback, useTheme, _DrawerMenu, _DrawerMenuItemProps } from '@internal/react-components';
 import React, { useMemo, useState } from 'react';
 import { CallAdapter } from '../CallComposite';
@@ -87,18 +87,7 @@ export const CallWithChatPane = (props: {
     </CallAdapterProvider>
   );
 
-  const pipStyles: ModalLocalAndRemotePIPStyles = useMemo(
-    () => ({
-      modal: {
-        main: {
-          borderRadius: theme.effects.roundedCorner4,
-          boxShadow: theme.effects.elevation8,
-          ...(theme.rtl ? { left: '1rem' } : { right: '1rem' })
-        }
-      }
-    }),
-    [theme.effects.roundedCorner4, theme.effects.elevation8, theme.rtl]
-  );
+  const pipStyles = useMemo(() => getPipStyles(theme), [theme]);
 
   const dataUiId =
     props.activePane === 'chat'
@@ -160,3 +149,18 @@ const availableSpaceStyles: IStackStyles = { root: { width: '100%', height: '100
 const sidePaneTokens: IStackTokens = {
   childrenGap: '0.5rem'
 };
+
+/**
+ * @private
+ */
+const getPipStyles = (theme: ITheme): ModalLocalAndRemotePIPStyles => ({
+  modal: {
+    main: {
+      borderRadius: theme.effects.roundedCorner4,
+      boxShadow: theme.effects.elevation8,
+      // Above the message thread / people pane.
+      zIndex: 2,
+      ...(theme.rtl ? { left: '1rem' } : { right: '1rem' })
+    }
+  }
+});

packages/react-composites/src/composites/CallWithChatComposite/ModalLocalAndRemotePIP.tsx

@@ -98,7 +98,6 @@ const modalStyle: IStyleFunctionOrObject<IModalStyleProps, IModalStyles> = {
     minWidth: 'min-content',
     minHeight: 'min-content',
     position: 'absolute',
-    zIndex: 1,
     overflow: 'hidden',
     // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
     pointerEvents: 'auto',

packages/react-composites/src/composites/common/styles/ParticipantContainer.styles.ts

@@ -56,7 +56,13 @@ export const scrollableContainer: IStackStyles = { root: { flexBasis: '0', flexG
  * @private
  */
 export const scrollableContainerContents: IStackItemStyles = {
-  root: { flexGrow: '1', flexBasis: '0', maxWidth: '100%' }
+  root: {
+    flexGrow: '1',
+    flexBasis: '0',
+    maxWidth: '100%',
+    // Create a new stacking context so that `pipStyles` can set zIndex above the container.
+    position: 'relative'
+  }
 };
 
 /**