fix(chat): ensure really long words can trigger wrapping

css/_chat.scss

@@ -173,8 +173,10 @@
 .chatmessage {
     background-color: $chatRemoteMessageBackgroundColor;
     border-radius: 0px 6px 6px 6px;
-    margin-top: 3px;
+    box-sizing: border-box;
     color: white;
+    margin-top: 3px;
+    max-width: 100%;
     padding-bottom: 3px;
     position: relative;
 

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

@@ -49,12 +49,11 @@ class ChatMessageGroup extends Component<Props> {
             <div className = { `chat-message-group ${className}` }>
                 {
                     messages.map((message, i) => (
-                        <div key = { i }>
-                            <ChatMessage
-                                key = { i }
-                                message = { message }
-                                showDisplayName = { i === 0 } />
-                        </div>))
+                        <ChatMessage
+                            key = { i }
+                            message = { message }
+                            showDisplayName = { i === 0 } />
+                    ))
                 }
                 <div className = 'chat-message-group-footer'>
                     { getLocalizedDateFormatter(