SimpleChatTC:UICleanup: WordBreaks, Print avoid side vertical

Define rules to ensure that chat message contents wrap so as to
avoid overflowing beyond the size of the screen being viewed.

The style used for chat message role to be placed with vertical
oriented text adjacent to the actual message content on the side
seems to be creating issue with blank pages in some browsers,
so avoid that styling when one is printing.

Author: hanishkvc

tools/server/public_simplechat/simplechat.css

@@ -45,6 +45,9 @@
 }
 .chat-message-reasoning {
     border-block-style: dashed;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    hyphens: auto;
 }
 .chat-message-toolcall {
     border-style: solid;
@@ -58,6 +61,16 @@
     border-width: thin;
     border-radius: 2px;
 }
+.chat-message-content {
+    overflow-wrap: break-word;
+    word-break: break-word;
+    hyphens: auto;
+}
+.chat-message-content-live {
+    overflow-wrap: break-word;
+    word-break: break-word;
+    hyphens: auto;
+}
 
 
 .gridx2 {
@@ -117,8 +130,26 @@ button {
 
 @media print {
 
+
     #fullbody {
         height: auto;
     }
 
+    .chat-message {
+        border-style: solid;
+        border-color: grey;
+        border-width: thin;
+        border-radius: 2px;
+        display:inherit;
+    }
+    .chat-message-role {
+        border-style: dotted;
+        border-color: black;
+        border-width: thin;
+        border-radius: 4px;
+        writing-mode:inherit;
+        padding-inline: 1vmin;
+    }
+
+
 }

tools/server/public_simplechat/simplechat.js

@@ -643,6 +643,7 @@ class SimpleChat {
      */
     async handle_response_multipart(resp, apiEP, elDiv) {
         let elP = ui.el_create_append_p("", elDiv);
+        elP.classList.add("chat-message-content-live")
         if (!resp.body) {
             throw Error("ERRR:SimpleChat:SC:HandleResponseMultiPart:No body...");
         }