[Bugfix] update text container width to cap text for longer locale strings (#5579)

* update text container width to cap text for longer locale strings

* Change files

* up spacing for REM

Author: dmceachernmsft

change-beta/@azure-communication-react-6b224443-1be4-4542-98c4-16d89f6842b4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Video Effects",
+  "comment": "update text container width to cap text for longer locale strings",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-6b224443-1be4-4542-98c4-16d89f6842b4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Video Effects",
+  "comment": "update text container width to cap text for longer locale strings",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -128,7 +128,7 @@ export const _VideoEffectsItem = (props: _VideoEffectsItemProps): JSX.Element =>
   const backgroundImage = props.backgroundProps?.url;
   const iconContainerStyles = mergeStyles({ height: '1.25rem' }, props.styles?.iconContainer);
   const textContainerStyles = mergeStyles(
-    { height: '1.25rem', width: '100%', overflow: 'hidden' },
+    { height: '1.25rem', maxWidth: '4.5rem', overflow: 'hidden' },
     props.styles?.textContainer
   );