[BugFix] Grey Tile fix (#3754) (#3757)

* render gallery when sidepane is closed

* Change files

* Duplicate change files for beta release

* fix render for desktop as well

* update re-render logic

* fix defined check

* fix cc

Author: dmceachernmsft

change-beta/@azure-communication-react-e0ab483b-96d9-4102-8c37-dbc0727c3d61.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bug fix",
+  "comment": "Render gallery content only when people pane screens on mobile aren't present",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e0ab483b-96d9-4102-8c37-dbc0727c3d61.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Bug fix",
+  "comment": "Render gallery content only when people pane screens on mobile aren't present",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -18,7 +18,6 @@ import {
 /* @conditional-compile-remove(gallery-layouts) */
 import { VideoGalleryLayout } from '@internal/react-components';
 import React, { useMemo, useRef, useState } from 'react';
-/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
 import { useEffect } from 'react';
 import { useCallback } from 'react';
 /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(close-captions) */
@@ -181,6 +180,16 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
 
   const isSidePaneOpen = useIsSidePaneOpen();
 
+  const [renderGallery, setRenderGallery] = useState<boolean>(!isSidePaneOpen && props.mobileView);
+
+  useEffect(() => {
+    if (isSidePaneOpen && props.mobileView) {
+      setRenderGallery(false);
+    } else {
+      setRenderGallery(true);
+    }
+  }, [props.mobileView, isSidePaneOpen]);
+
   const locale = useLocale();
   const modalStrings = { dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel };
 
@@ -425,7 +434,7 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                       <MutedNotification {...props.mutedNotificationProps} />
                     )}
                   </Stack.Item>
-                  {props.onRenderGalleryContent && props.onRenderGalleryContent()}
+                  {renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent()}
                   {
                     /* @conditional-compile-remove(close-captions) */
                     true &&