Truncate long text used in video effects button (#5097)

* Truncate long text used in video effects button

* Change files

change-beta/@azure-communication-react-e904db1d-2eea-445a-bbe0-3cc742c520b7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Video effects button",
+  "comment": "Truncate long text used in video effects button",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-e904db1d-2eea-445a-bbe0-3cc742c520b7.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Video effects button",
+  "comment": "Truncate long text used in video effects button",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoEffects/VideoEffectsItem.styles.tsx

@@ -52,7 +52,8 @@ export const videoEffectsItemContainerStyles = (args: {
           args.disabled && !args.isSelected
             ? `${borderDefaultThickness} solid ${args.theme.palette.neutralQuaternaryAlt}`
             : `${borderActiveThickness} solid ${args.theme.palette.themePrimary}`
-      }
+      },
+      padding: '0.5rem'
     }
   };
 };

packages/react-components/src/components/VideoEffects/VideoEffectsItem.tsx

@@ -127,7 +127,10 @@ export const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element =>
   const disabled = props.disabled ?? false;
   const backgroundImage = props.backgroundProps?.url;
   const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);
-  const textContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.textContainer);
+  const textContainerStyles = mergeStyles(
+    { height: '1.25rem', width: '100%', overflow: 'hidden' },
+    props.styles?.textContainer
+  );
 
   const containerStyles = useCallback(
     () =>
@@ -156,7 +159,7 @@ export const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element =>
           ariaLabel={props.ariaLabel ?? (props.tooltipProps?.content as string) ?? props.itemKey}
           aria-disabled={props.disabled}
         >
-          <Stack horizontalAlign={'center'}>
+          <Stack horizontalAlign={'center'} className={mergeStyles({ width: '100%' })}>
             {props.iconProps && (
               <Stack.Item className={iconContainerStyles}>
                 <Icon {...props.iconProps} />
@@ -164,7 +167,12 @@ export const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element =>
             )}
             {props.title && (
               <Stack.Item className={textContainerStyles}>
-                <Text variant="small">{props.title}</Text>
+                <Text
+                  variant="small"
+                  styles={{ root: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }}
+                >
+                  {props.title}
+                </Text>
               </Stack.Item>
             )}
           </Stack>