Fix text overflow in chat and instruct mode (#1044)

css/html_cai_style.css

@@ -7,11 +7,13 @@
     padding-right: 20px;
     display: flex;
     flex-direction: column-reverse;
+    word-break: break-word;
+    overflow-wrap: anywhere;
 }
 
 .message {
     display: grid;
-    grid-template-columns: 60px 1fr;
+    grid-template-columns: 60px minmax(0, 1fr);
     padding-bottom: 25px;
     font-size: 15px;
     font-family: Helvetica, Arial, sans-serif;
@@ -73,6 +75,13 @@
     display: inline !important;
 }
 
+.message-body code {
+    overflow-x: auto;
+}
+.message-body :not(pre) > code {
+    white-space: normal !important;
+}
+
 .dark .message-body p em {
     color: rgb(138, 138, 138) !important;
 }

css/html_instruct_style.css

@@ -7,6 +7,8 @@
     padding-right: 20px;
     display: flex;
     flex-direction: column-reverse;
+    word-break: break-word;
+    overflow-wrap: anywhere;
 }
 
 .message {
@@ -37,6 +39,13 @@
     display: inline !important;
 }
 
+.message-body code {
+    overflow-x: auto;
+}
+.message-body :not(pre) > code {
+    white-space: normal !important;
+}
+
 .dark .message-body p em {
     color: rgb(138, 138, 138) !important;
 }