Remove vertical scroll on mobile landscape (and support galaxy fold dimensions) in composites (#1769)

Author: JamesBurnside

change/@internal-react-composites-e73b2c8e-d152-4640-89d8-623e05a72c53.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Reduce min-width and min-height of the composites to support a galaxy fold portrait screen",
+  "packageName": "@internal/react-composites",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@internal-storybook-11be91d1-9151-4c53-ad34-aebabe11b630.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Update docs to note change on new min height and min width",
+  "packageName": "@internal/storybook",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -151,7 +151,7 @@ const MainScreen = (props: MainScreenProps): JSX.Element => {
  * A customizable UI composite for calling experience.
  *
  * @remarks Call composite min width/height are as follow:
- * - mobile: 19.5rem x 21rem (312px x 336px, with default rem at 16px)
+ * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)
  * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)
  *
  * @public

packages/react-composites/src/composites/CallComposite/styles/CallComposite.styles.ts

@@ -22,6 +22,6 @@ export const mainScreenContainerStyleDesktop = mergeStyles({
  */
 export const mainScreenContainerStyleMobile = mergeStyles({
   ...mainScreenContainerStyle,
-  minWidth: '19.5rem', // max of min-width of composite pages (Call page)
-  minHeight: '19rem' // max height of min-height of composite pages (Configuration page)
+  minWidth: '17.5rem', // max of min-width of composite pages (Call page)
+  minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
 });

packages/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts

@@ -38,7 +38,7 @@ export const configurationContainerStyleDesktop = mergeStyles({
 export const configurationContainerStyleMobile = mergeStyles({
   ...configurationContainerStyle,
   minWidth: '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2
-  minHeight: '19rem'
+  minHeight: '13rem'
 });
 
 /**

packages/react-composites/src/composites/CallComposite/styles/CallPage.styles.ts

@@ -20,7 +20,7 @@ export const callControlsContainerStyles = mergeStyles(controlBarContainerStyles
 const containerStyle: IStyle = {
   width: '100%',
   position: 'relative',
-  minHeight: '15rem' // linked to minimum space allocated to media gallery
+  minHeight: '13rem' // linked to minimum space allocated to media gallery
 };
 
 /**
@@ -36,7 +36,7 @@ export const containerStyleDesktop = mergeStyles({
  */
 export const containerStyleMobile = mergeStyles({
   ...containerStyle,
-  minWidth: '19.5rem'
+  minWidth: '17.5rem'
 });
 
 /**

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

@@ -83,7 +83,7 @@ export type ChatCompositeOptions = {
 /**
  * A customizable UI composite for the chat experience.
  *
- * @remarks Chat composite min width and height are respectively 19.5rem and 20rem (312px and 320px, with default rem at 16px)
+ * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
  *
  * @public
  */

packages/react-composites/src/composites/ChatComposite/styles/Chat.styles.ts

@@ -12,7 +12,7 @@ const MESSAGE_THREAD_WIDTH = '41.25rem';
 export const chatScreenContainerStyle = mergeStyles({
   height: '100%',
   width: '100%',
-  minHeight: '20rem',
+  minHeight: '13rem',
   minWidth: '17.5rem'
 });
 

packages/storybook/stories/CallComposite/CallCompositeDocs.tsx

@@ -31,7 +31,7 @@ export const getDocs: () => JSX.Element = () => {
         CallComposite brings together key components to provide a full calling experience out of the box.
       </Description>
       <Description>Note that CallComposite has the following min width and height:</Description>
-      <Description>- mobile: 19.5rem x 21rem (312px x 336px, with default rem at 16px)</Description>
+      <Description>- mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)</Description>
       <Description>- desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)</Description>
       <Heading>Basic usage</Heading>
       <Description>

packages/storybook/stories/ChatComposite/ChatCompositeDocs.tsx

@@ -27,7 +27,7 @@ export const getDocs: () => JSX.Element = () => {
         ChatComposite brings together key components to provide a full chat experience out of the box.
       </Description>
       <Description>
-        Note that ChatComposite has a min width and height of respectively 19.5rem and 20rem (312px x 320px, with
+        Note that ChatComposite has a min width and height of respectively 17.5rem and 20rem (280px x 320px, with
         default rem at 16px).
       </Description>
       <Heading>Basic usage</Heading>