[Bugfix] Update local tile aspect ratio and fix CallWithChat flashing with scrollable gallery (#2734) (#2736)

* set height for tiles to maintain aspect

* add enforced width to the CallComposite container

* Change files

* Duplicate change files for beta release

* 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

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-7b8a106b-3a88-49ca-a597-1b81c0f60143.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updates LocalVideo tile to be 9:16 aspect ratio to show whole feed. fixes CallWithChat flashing issue with scrollable gallery.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-7b8a106b-3a88-49ca-a597-1b81c0f60143.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updates LocalVideo tile to be 9:16 aspect ratio to show whole feed. fixes CallWithChat flashing issue with scrollable gallery.",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.ts

@@ -30,7 +30,7 @@ export const videoGalleryContainerStyle: IStackStyles = {
 /**
  * Small floating modal width and height in rem for small screen
  */
-export const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
+export const SMALL_FLOATING_MODAL_SIZE_PX = { width: 58, height: 104 };
 
 /**
  * Large floating modal width and height in rem for large screen

packages/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.ts

@@ -36,7 +36,8 @@ export const horizontalGalleryStyle = (isNarrow: boolean): HorizontalGalleryStyl
  * Small horizontal gallery tile size in rem
  * @private
  */
-export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
+export const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 6.5, width: 6.5 };
+
 /**
  * Large horizontal gallery tile size in rem
  * @private

packages/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.ts

@@ -20,7 +20,8 @@ export const callCompositeContainerStyles: 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'
+    position: 'relative',
+    width: '100%'
   }
 };