From 9e9016f7fea1a159ba0b46262fa709bd4e400090 Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Wed, 29 Oct 2025 22:06:57 +0530
Subject: [PATCH] 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.
---
 tools/server/public_simplechat/simplechat.css | 31 +++++++++++++++++++
 tools/server/public_simplechat/simplechat.js  |  1 +
 2 files changed, 32 insertions(+)

diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 0dcb2cf8d8..1f913fa272 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/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;
+    }
+
+
 }
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 8e2a7c37de..044e889d2e 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/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...");
         }