From 80ee35b9b1a731d894df632618bbed18566c5240 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Thu, 7 Nov 2024 15:56:43 -0800
Subject: [PATCH] Wrap messages in web, obsidian UI to stay within screen when
 long links

Wrap long links etc. in chat messages and train of thought lists on
web app app and obsidian plugin by breaking them into newlines by word
---
 src/interface/obsidian/styles.css                               | 1 +
 .../web/app/components/chatMessage/chatMessage.module.css       | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css
index 42c1b3ce..b02b2ff3 100644
--- a/src/interface/obsidian/styles.css
+++ b/src/interface/obsidian/styles.css
@@ -78,6 +78,7 @@ If your plugin does not need CSS, delete this file.
     user-select: text;
     color: var(--text-normal);
     background-color: var(--active-bg);
+    word-break: break-word;
 }
 /* color chat bubble by khoj blue */
 .khoj-chat-message-text.khoj {
diff --git a/src/interface/web/app/components/chatMessage/chatMessage.module.css b/src/interface/web/app/components/chatMessage/chatMessage.module.css
index ba9372b8..b055d0a5 100644
--- a/src/interface/web/app/components/chatMessage/chatMessage.module.css
+++ b/src/interface/web/app/components/chatMessage/chatMessage.module.css
@@ -4,6 +4,7 @@ div.chatMessageContainer {
     margin: 12px;
     border-radius: 16px;
     padding: 8px 16px 0 16px;
+    word-break: break-word;
 }
 
 div.chatMessageWrapper {
@@ -170,6 +171,7 @@ div.trainOfThoughtElement {
 div.trainOfThoughtElement ol,
 div.trainOfThoughtElement ul {
     margin: auto;
+    word-break: break-word;
 }
 
 @media screen and (max-width: 768px) {