Wrap chat message text (#92)

Also support for hyphenating wrapped words should the browser support it
ScottLogic · Aug 8, 2023 · 638af95 · 638af95
1 parent 004f57f
commit 638af95
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/frontend/src/components/ChatBox/ChatBoxMessage.css b/frontend/src/components/ChatBox/ChatBoxMessage.css
@@ -6,6 +6,11 @@
   margin-top: 16px;
   padding: 8px;
   max-width: 85%;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-wrap: break-word;
 }
 
 .blocked {
@@ -35,7 +40,7 @@
 
 .chat-box-message-user-transformed {
   background-color: rgb(252 229 255);
-    float: left;
+  float: left;
   float: left;
   margin-right: auto;
   text-align: left;

diff --git a/frontend/src/components/ChatBox/ChatBoxMessage.tsx b/frontend/src/components/ChatBox/ChatBoxMessage.tsx
@@ -13,6 +13,7 @@ function ChatBoxMessage({ message }: { message: ChatMessage }) {
           ? "chat-box-message chat-box-message-ai chat-box-message-blocked"
           : "chat-box-message chat-box-message-ai chat-box-message-ok"
       }
+      lang="en"
     >
       {(message.isUser && message.isOriginalMessage && <b>Input: </b>) ||
         (message.isUser && !message.isOriginalMessage && <b>Edited: </b>)}