fix(chat) Break long text in multiple lines (#12842)

react/features/chat/components/web/ChatMessage.tsx

@@ -93,7 +93,8 @@ const styles = (theme: Theme) => {
         userMessage: {
             ...withPixelLineHeight(theme.typography.bodyShortRegular),
             color: theme.palette.text01,
-            whiteSpace: 'pre-wrap'
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word'
         },
 
         privateMessageNotice: {

react/features/chat/components/web/ChatMessageGroup.tsx

@@ -26,7 +26,8 @@ const useStyles = makeStyles()(theme => {
     return {
         messageGroup: {
             display: 'flex',
-            flexDirection: 'column'
+            flexDirection: 'column',
+            maxWidth: '100%'
         },
 
         groupContainer: {