Resize VideoGallery in snapshots tests to avoid flaky scrollbars (#5477)

* Resize VideoGallery in snapshots tests to avoid flaky scrollbars

* Update packages/react-components browser test snapshots

* Update packages/react-components browser test snapshots

* Update packages/react-components browser test snapshots

* Update packages/react-components browser test snapshots

* first try to stabilize snapshots for VideoGallery component tests

* Revert "first try to stabilize snapshots for VideoGallery component tests"

This reverts commit 5de1759.

* increase maxDiffPixels to 4

* widen videogallery container

* Update packages/react-components browser test snapshots

* Update packages/react-components browser test snapshots

---------

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

common/config/playwright/playwright.config.common.ts

@@ -73,7 +73,7 @@ export const config: PlaywrightTestConfig<TestOptions> = {
     },
     // components tests use toHaveScreenshot
     toHaveScreenshot: {
-      maxDiffPixels: 3,
+      maxDiffPixels: 4,
       // make stricter comparison for colors, default value was 0.2
       // which didn't catch some color differences for gray colors
       threshold: 0

packages/react-components/tests/browser/VideoGallery.spec.tsx

@@ -21,7 +21,7 @@ test.describe('VGL - VideoGallery tests', () => {
       })
     );
     const component = await mount(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -31,7 +31,7 @@ test.describe('VGL - VideoGallery tests', () => {
     );
     await expect(component).toHaveScreenshot('VGL-1-1-videogallery-with-audio-only-before-dominant-speakers.png');
     await component.update(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -59,7 +59,7 @@ test.describe('VGL - VideoGallery tests', () => {
     remoteParticipants[8].videoStream = { isAvailable: true };
 
     const component = await mount(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -69,7 +69,7 @@ test.describe('VGL - VideoGallery tests', () => {
     );
     await expect(component).toHaveScreenshot('VGL-2-1-videogallery-with-some-video-before-dominant-speakers.png');
     await component.update(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -92,7 +92,7 @@ test.describe('VGL - VideoGallery tests', () => {
     remoteParticipants[5].isScreenSharingOn = true;
     remoteParticipants[5].screenShareStream = { isAvailable: true };
     const component = await mount(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -102,7 +102,7 @@ test.describe('VGL - VideoGallery tests', () => {
     );
     await expect(component).toHaveScreenshot('VGL-3-1-videogallery-with-screen-share-before-dominant-speakers.png');
     await component.update(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vw' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -125,7 +125,7 @@ test.describe('VGL - VideoGallery tests', () => {
     };
     remoteParticipants.push(screenSharingParticipant);
     const component = await mount(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}
@@ -136,7 +136,7 @@ test.describe('VGL - VideoGallery tests', () => {
     await expect(component).toHaveScreenshot('VGL-4-1-videogallery-before-spotlight.png');
     remoteParticipants[7].spotlight = { spotlightedOrderPosition: 1 };
     component.update(
-      <Stack styles={{ root: { width: '100vw', height: '100vh' } }}>
+      <Stack styles={{ root: { width: '95vw', height: '90vh' } }}>
         <VideoGallery
           localParticipant={localParticipant}
           remoteParticipants={remoteParticipants}