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

@@ -77,6 +77,7 @@ export default class Chat extends Component {
                   style={{backgroundColor: '#e8ffe6'}}
                   title={message.userNick}
                   subheader={message.msg}
+                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
                 />
                 :
                 <CardHeader
@@ -89,6 +90,7 @@ export default class Chat extends Component {
                   style={{backgroundColor: '#fcfcfc'}}
                   title={message.userNick}
                   subheader={message.msg}
+                  subheaderTypographyProps={{sx: {wordWrap: "break-word", width: 200}}}
                 />} 
                 </Card>
               </>)}