Cherry pick 2864 to release/1.5.1 beta.2 (#2876)

* 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>

* update beta release notes

---------

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/communication-react/CHANGELOG.beta.md

@@ -55,6 +55,7 @@ This feature includes:
   - Fix CallWithChat overflow buttons onClick not working, styles not being fully applied and and showLabel: false not hiding the button label ([PR #2750](https://github.com/azure/communication-ui-library/pull/2750) by 2684369+JamesBurnside@users.noreply.github.com)
   - Fix PSTN id parsing and add unit test to validate E.164 format numbers ([PR #2739](https://github.com/azure/communication-ui-library/pull/2739) by 94866715+dmceachernmsft@users.noreply.github.com)
   - Prevent overflow of VideoGallery when scrollable horizontal gallery is present and side pane is open ([PR #2850](https://github.com/Azure/communication-ui-library/pull/2850)by 79475487+mgamis-msft@users.noreply.github.com)
+  - Prevent overlap of side pane in Call and CallWithChat composites when window is narrow ([PR #2864](https://github.com/Azure/communication-ui-library/pull/2864)by 79475487+mgamis-msft@users.noreply.github.com)
 
 ### Improvements
 

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;