Fix side pane content being clipped on a small screen at 200% zoom (#3937)

* Fix side pane content being clipped on a small screen at 200% zoom

* Change files

* Duplicate change files for beta release

Author: JamesBurnside

change-beta/@azure-communication-react-f2d5b939-144b-4b28-a777-ba67ba032548.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix side pane content being clipped on a small screen at 200% zoom",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f2d5b939-144b-4b28-a777-ba67ba032548.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix side pane content being clipped on a small screen at 200% zoom",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -453,6 +453,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
               mobileView={props.mobileView}
               /* @conditional-compile-remove(video-background-effects) */
               maxWidth={isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined}
+              minWidth={isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined}
               updateSidePaneRenderer={props.updateSidePaneRenderer}
               onPeopleButtonClicked={
                 props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)

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

@@ -19,6 +19,7 @@ export interface SidePaneProps {
   updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
   mobileView?: boolean;
   maxWidth?: string;
+  minWidth?: string;
 
   // legacy arguments to be removed in breaking change
   disablePeopleButton?: boolean;
@@ -36,12 +37,15 @@ export const SidePane = (props: SidePaneProps): JSX.Element => {
     !overrideSidePane.isActive;
   const renderingOnlyHiddenContent = renderingHiddenOverrideContent && !sidePaneRenderer;
 
-  const maxWidthStyles = useMemo(() => sidePaneStyles(props.maxWidth), [props.maxWidth]);
+  const widthConstrainedStyles = useMemo(
+    () => sidePaneStyles(props.maxWidth, props.minWidth),
+    [props.maxWidth, props.minWidth]
+  );
   const paneStyles = renderingOnlyHiddenContent
     ? hiddenStyles
     : props.mobileView
     ? availableSpaceStyles
-    : maxWidthStyles;
+    : widthConstrainedStyles;
 
   const Header =
     (overrideSidePane?.isActive ? overrideSidePane.renderer.headerRenderer : sidePaneRenderer?.headerRenderer) ??

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

@@ -410,7 +410,12 @@ export const ConfigurationPage = (props: ConfigurationPageProps): JSX.Element =>
           /* @conditional-compile-remove(video-background-effects) */
           customWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}
         >
-          <SidePane mobileView={props.mobileView} updateSidePaneRenderer={props.updateSidePaneRenderer} />
+          <SidePane
+            mobileView={props.mobileView}
+            updateSidePaneRenderer={props.updateSidePaneRenderer}
+            maxWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}
+            minWidth={`${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem`}
+          />
         </Panel>
       </Stack>
     </Stack>

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

@@ -3,8 +3,10 @@
 
 import { IStyle, memoizeFunction, mergeStyles } from '@fluentui/react';
 import { MessageThreadStyles } from '@internal/react-components';
+import { CHAT_CONTAINER_MIN_WIDTH_REM } from '../../common/constants';
 
-const MESSAGE_THREAD_WIDTH = '41.25rem';
+const CHAT_CONTAINER_MAX_WIDTH_REM = 41.25;
+const CHAT_CONTAINER_MIN_HEIGHT_REM = 13;
 
 /**
  * @private
@@ -18,8 +20,8 @@ export const CHAT_CONTAINER_ZINDEX = 1;
 export const chatScreenContainerStyle = mergeStyles({
   height: '100%',
   width: '100%',
-  minHeight: '13rem',
-  minWidth: '17.5rem'
+  minHeight: `${CHAT_CONTAINER_MIN_HEIGHT_REM}rem`,
+  minWidth: `${CHAT_CONTAINER_MIN_WIDTH_REM}rem`
 });
 
 /**
@@ -95,7 +97,7 @@ export const topicNameLabelStyle = mergeStyles({
  */
 export const messageThreadChatCompositeStyles = memoizeFunction(
   (background: string): MessageThreadStyles => ({
-    root: { maxWidth: MESSAGE_THREAD_WIDTH },
+    root: { maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem` },
     chatContainer: { background: background }
   })
 );
@@ -111,7 +113,7 @@ export const typingIndicatorContainerStyles: IStyle = {
  * @private
  */
 export const sendboxContainerStyles: IStyle = {
-  maxWidth: MESSAGE_THREAD_WIDTH,
+  maxWidth: `${CHAT_CONTAINER_MAX_WIDTH_REM}rem`,
   width: '100%',
   alignSelf: 'center'
 };

packages/react-composites/src/composites/common/constants.ts

@@ -11,3 +11,10 @@ export const UNSUPPORTED_CHAT_THREAD_TYPE = ['@thread.tacv2', '@thread.skype'];
  */
 export const TEAMS_LIMITATION_LEARN_MORE =
   'https://learn.microsoft.com/en-us/azure/communication-services/concepts/join-teams-meeting#limitations-and-known-issues';
+
+/**
+ * @remarks
+ * This value is publicly documented in the ChatComposite API documentation.
+ * Changing this value will require updating the API documentation.
+ */
+export const CHAT_CONTAINER_MIN_WIDTH_REM = 17.5;

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

@@ -2,6 +2,9 @@
 // Licensed under the MIT License.
 
 import { concatStyleSets, IButtonStyles, IStackStyles, IStackTokens } from '@fluentui/react';
+import { CHAT_CONTAINER_MIN_WIDTH_REM } from '../constants';
+
+const SIDE_PANE_PADDING_LR_REM = 0.25;
 
 /**
  * @private
@@ -72,12 +75,13 @@ export const hiddenStyles: IStackStyles = {
 /**
  * @private
  */
-export const sidePaneStyles = (maxWidth?: string): IStackStyles => ({
+export const sidePaneStyles = (maxWidth?: string, minWidth?: string): IStackStyles => ({
   root: {
     height: 'auto',
     width: '100%',
-    padding: '0.5rem 0.25rem',
-    maxWidth: maxWidth ?? '21.5rem'
+    padding: `0.5rem ${SIDE_PANE_PADDING_LR_REM}rem`,
+    maxWidth: maxWidth ?? '21.5rem',
+    minWidth: minWidth ?? `${CHAT_CONTAINER_MIN_WIDTH_REM + SIDE_PANE_PADDING_LR_REM * 2}rem`
   }
 });