Fix PIPIP overlap in chat pane

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

@@ -8,13 +8,14 @@ import { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvide
 import { ChatAdapter, ChatComposite, ChatCompositeProps } from '../ChatComposite';
 import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
 import {
+  getPipStyles,
   paneBodyContainer,
   scrollableContainer,
   scrollableContainerContents
 } from '../common/styles/ParticipantContainer.styles';
 import { SidePaneHeader } from './SidePaneHeader';
 import { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';
-import { ModalLocalAndRemotePIP, ModalLocalAndRemotePIPStyles } from './ModalLocalAndRemotePIP';
+import { ModalLocalAndRemotePIP } from './ModalLocalAndRemotePIP';
 import { PeoplePaneContent } from './PeoplePaneContent';
 import { drawerContainerStyles } from './styles/CallWithChatCompositeStyles';
 import { TabHeader } from './TabHeader';
@@ -87,18 +88,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'

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

@@ -1,7 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { IStackStyles, IStackItemStyles, IStackTokens, mergeStyles } from '@fluentui/react';
+import { IStackStyles, IStackItemStyles, IStackTokens, mergeStyles, ITheme } from '@fluentui/react';
+import { ModalLocalAndRemotePIPStyles } from '../../CallWithChatComposite/ModalLocalAndRemotePIP';
 
 /**
  * @private
@@ -56,9 +57,30 @@ 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'
+  }
 };
 
+/**
+ * @private
+ */
+export 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' })
+    }
+  }
+});
+
 /**
  * @private
  */