Fix side pane when composite is narrow (#2864)

* set min width of composite content to 30rem

* Change files

* Duplicate change files for beta release

* fix incorrect file header

* Add comment to variable and simplified variable name

* include minWidth styling for stable

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* apply minwidth only when not mobile

* cond-comp import

* cond-comp fix

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* revert all snapshot updates

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Donald McEachern <94866715+dmceachernmsft@users.noreply.github.com>

Author: 3 people

change-beta/@azure-communication-react-b577cf99-a1c9-4196-807a-9f3be0361d7b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix side pane overlapping with composite when window is narrow",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-b577cf99-a1c9-4196-807a-9f3be0361d7b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix side pane overlapping with composite when window is narrow",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx

@@ -21,6 +21,7 @@ import { useCallback } from 'react';
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { containerDivStyles } from '../../common/ContainerRectProps';
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
+import { compositeMinWidthRem } from '../../common/styles/Composite.styles';
 import { useAdapter } from '../adapter/CallAdapterProvider';
 import { CallControls, CallControlsProps } from '../components/CallControls';
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
@@ -87,8 +88,13 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
 
   /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
   const callCompositeContainerCSS = useMemo(() => {
-    return { display: isMobileWithActivePane ? 'none' : 'flex', minWidth: 0, width: '100%', height: '100%' };
-  }, [isMobileWithActivePane]);
+    return {
+      display: isMobileWithActivePane ? 'none' : 'flex',
+      minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,
+      width: '100%',
+      height: '100%'
+    };
+  }, [isMobileWithActivePane, props.mobileView]);
 
   // To be removed once feature is out of beta, replace with callCompositeContainerCSS
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

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

@@ -420,7 +420,7 @@ const CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {
         <Stack horizontal grow>
           <Stack.Item
             grow
-            styles={callCompositeContainerStyles}
+            styles={callCompositeContainerStyles(mobileView)}
             // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.
             style={callCompositeContainerCSS}
           >

packages/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import { IStackStyles } from '@fluentui/react';
+import { compositeMinWidthRem } from '../../common/styles/Composite.styles';
 
 /**
  * @private
@@ -16,15 +17,15 @@ export const compositeOuterContainerStyles: IStackStyles = {
 };
 
 /** @private */
-export const callCompositeContainerStyles: IStackStyles = {
+export const callCompositeContainerStyles = (isMobile: boolean): IStackStyles => ({
   root: {
     // Start a new stacking context so that any `position:absolute` elements
     // inside the call composite do not compete with its siblings.
     position: 'relative',
     width: '100%',
-    minWidth: 0
+    minWidth: isMobile ? 'unset' : `${compositeMinWidthRem}rem`
   }
-};
+});
 
 /** @private */
 export const controlBarContainerStyles: IStackStyles = {

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

@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * This minimum width is to make sure the side pane does not overlap with the composite when the screen is narrow.
+ *
+ * @private
+ */
+export const compositeMinWidthRem = 30;