[Bugfix] long name screenshare mobile fix (#5677)

* change label overflow behavior

* update styling to cap the name length and ellipsis the overflow

* Change files

* move styles to file

change-beta/@azure-communication-react-11ff780a-f45b-4d87-aa95-1ce887a63d91.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "VideoGallery",
+  "comment": "Update styles for screenshare loading spinner to better handle long names on mobile and desktop",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-11ff780a-f45b-4d87-aa95-1ce887a63d91.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "VideoGallery",
+  "comment": "Update styles for screenshare loading spinner to better handle long names on mobile and desktop",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoGallery/RemoteScreenShare.tsx

@@ -8,7 +8,7 @@ import { StreamMedia } from '../StreamMedia';
 import { VideoTile } from '../VideoTile';
 import { CreateVideoStreamViewResult, VideoStreamOptions } from '../../types';
 import { ReactionResources, VideoGalleryLocalParticipant, VideoGalleryRemoteParticipant } from '../../types';
-import { loadingStyle } from './styles/RemoteScreenShare.styles';
+import { loadingLabelStyles, loadingStyle } from './styles/RemoteScreenShare.styles';
 import { _formatString } from '@internal/acs-ui-common';
 import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
 
@@ -110,7 +110,12 @@ export const RemoteScreenShare = React.memo(
 export const LoadingSpinner = (props: { loadingMessage: string }): JSX.Element => {
   return (
     <Stack verticalAlign="center" className={loadingStyle}>
-      <Spinner label={props.loadingMessage} size={SpinnerSize.xSmall} aria-live={'assertive'} />
+      <Spinner
+        styles={loadingLabelStyles}
+        label={props.loadingMessage}
+        size={SpinnerSize.xSmall}
+        aria-live={'assertive'}
+      />
     </Stack>
   );
 };

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { mergeStyles } from '@fluentui/react';
+import { ISpinnerStyles, mergeStyles } from '@fluentui/react';
 
 /**
  * @private
@@ -9,3 +9,10 @@ export const loadingStyle = mergeStyles({
   height: '100%',
   width: '100%'
 });
+
+/**
+ * @private
+ */
+export const loadingLabelStyles: ISpinnerStyles = {
+  label: { maxWidth: '10rem', overflow: 'hidden', textOverflow: 'ellipsis' }
+};