Fix huge media gallery in meetings when a participant is screen shari…

…ng (#871)

change/@internal-react-composites-df99e65d-df3f-4b53-abc0-8b8afdfb59b8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix huge media gallery in meetings when a participant is screen sharing",
+  "packageName": "@internal/react-composites",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/MeetingComposite/styles/MeetingCompositeStyles.ts

@@ -6,4 +6,15 @@ import { IStackStyles } from '@fluentui/react';
 /**
  * @private
  */
-export const compositeOuterContainerStyles: IStackStyles = { root: { width: '100%' } };
+export const compositeOuterContainerStyles: IStackStyles = {
+  root: {
+    width: '100%',
+
+    // This allows the composite to correctly contain the call composite by calculating a height for the available space.
+    // Items inside the call composite that fill 100% of the height will now fill the height of this container instead
+    // of the height of the child items.
+    // If this css property is to be removed, test the participant pane correctly uses the scroll overflow when there a lot
+    // of participants (i.e. beyond screen height) and where one participant is sharing their screen.
+    flexWrap: 'wrap'
+  }
+};