Improve chat text overflow. Graceful overflow without whitespaces.

chat/consumers.py

@@ -49,16 +49,8 @@ class ChatRoomConsumer(AsyncWebsocketConsumer):
         message = event["message"]
         nick = event["nick"]
 
-        # Insert a white space in words longer than 22 characters.
-        # Helps when messages overflow in a single line.
-        words = message.split(" ")
-        fix_message = ""
-        for word in words:
-            word = " ".join(word[i:i + 22] for i in range(0, len(word), 22))
-            fix_message = fix_message + " " + word
-
         await self.send(text_data=json.dumps({
-            "message": fix_message,
+            "message": message,
             "user_nick": nick,
         }))
 

frontend/src/components/Chat.js

@@ -67,7 +67,7 @@ export default class Chat extends Component {
               <Card elevation={5} align="left" >
               {/* If message sender is not our nick, gray color, if it is our nick, green color */}
               {message.userNick == this.props.ur_nick ? 
-                  <CardHeader
+                <CardHeader
                   avatar={
                     <Avatar
                       alt={message.userNick}
@@ -77,19 +77,21 @@ export default class Chat extends Component {
                   style={{backgroundColor: '#e8ffe6'}}
                   title={message.userNick}
                   subheader={message.msg}
+                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
                 />
                 :
                 <CardHeader
-                        avatar={
-                          <Avatar
-                            alt={message.userNick}
-                            src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'} 
-                            />
-                        }
-                        style={{backgroundColor: '#fcfcfc'}}
-                        title={message.userNick}
-                        subheader={message.msg}
-                      />} 
+                  avatar={
+                    <Avatar
+                      alt={message.userNick}
+                      src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'} 
+                      />
+                  }
+                  style={{backgroundColor: '#fcfcfc'}}
+                  title={message.userNick}
+                  subheader={message.msg}
+                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
+                />} 
                 </Card>
               </>)}
               <div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>