Fix meeting composite chat pane being squashed by permission banner (#665)

.github/workflows/update-snapshot.yml

@@ -1,7 +1,7 @@
 name: Update snapshots
 
 on:
-  # Run any time when a new label added to the PR 
+  # Run any time when a new label added to the PR
   pull_request:
     types: [labeled]
 

change/@internal-react-composites-d643e34c-d32e-4fce-ab74-807ccaf89a1e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix permission banner styling - allow multiline",
+  "packageName": "@internal/react-composites",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/MeetingComposite/SidePane.tsx

@@ -30,8 +30,8 @@ const SidePane = (props: {
   // typed but not sent should not be lost if the side panel is closed and then reopened.
   const sidePaneStyles = props.hidden ? sidePaneContainerHiddenStyles : sidePaneContainerStyles;
   return (
-    <Stack styles={sidePaneStyles} tokens={sidePaneContainerTokens}>
-      <Stack.Item>
+    <Stack.Item disableShrink verticalFill styles={sidePaneStyles} tokens={sidePaneContainerTokens}>
+      <Stack verticalFill>
         <Stack horizontal horizontalAlign="space-between" styles={sidePaneHeaderStyles}>
           <Stack.Item>{props.headingText}</Stack.Item>
           <CommandBarButton
@@ -40,15 +40,15 @@ const SidePane = (props: {
             onClick={props.onClose}
           />
         </Stack>
-      </Stack.Item>
-      <Stack grow styles={paneBodyContainer}>
-        <Stack horizontal styles={scrollableContainer}>
-          <Stack.Item verticalFill styles={scrollableContainerContents}>
-            {props.children}
-          </Stack.Item>
-        </Stack>
+        <Stack.Item verticalFill grow styles={paneBodyContainer}>
+          <Stack horizontal styles={scrollableContainer}>
+            <Stack.Item verticalFill styles={scrollableContainerContents}>
+              {props.children}
+            </Stack.Item>
+          </Stack>
+        </Stack.Item>
       </Stack>
-    </Stack>
+    </Stack.Item>
   );
 };
 

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

@@ -8,7 +8,16 @@ export const permissionsBannerContainerStyle = {
 };
 
 export const permissionsBannerMessageBarStyle: IStyleFunctionOrObject<IMessageBarStyleProps, IMessageBarStyles> = {
-  content: { alignItems: 'center', justifyContent: 'center', position: 'relative' },
-  text: { flexGrow: '0' },
-  actions: { position: 'absolute', right: '0px' }
+  root: {
+    // Constrain permission banner height if there is a long error message in a narrow space.
+    maxHeight: '5rem'
+  },
+  text: {
+    // Ensure the dismiss action button is aligned to the right hand side by allowing text to grow to available space
+    flexGrow: '1',
+
+    // Allow errors to be multi-line. We use this property instead of `isMultiline={true}` to ensure the action button
+    // does not take a new line and is instead placed to the right hand side of the error message.
+    span: { whiteSpace: 'normal' }
+  }
 };