From 32b150cf92f1c4c4c2443477d1d8e777e2f23e42 Mon Sep 17 00:00:00 2001
From: neulhan <neulhan@icloud.com>
Date: Sun, 6 Apr 2025 00:31:35 +0900
Subject: [PATCH] fix : Resolved a styling issue

---
 src/components/thread/index.tsx               | 4 ++--
 src/components/thread/messages/human.tsx      | 2 +-
 src/components/thread/messages/tool-calls.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index 10facc7..8a40a36 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -325,7 +325,7 @@ export function Thread() {
         <StickToBottom className="relative flex-1 overflow-hidden">
           <StickyToBottomContent
             className={cn(
-              "absolute inset-0 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
+              "absolute px-4 inset-0 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
               !chatStarted && "flex flex-col items-stretch mt-[25vh]",
               chatStarted && "grid grid-rows-[1fr_auto]",
             )}
@@ -356,7 +356,7 @@ export function Thread() {
               </>
             }
             footer={
-              <div className="sticky flex flex-col items-center gap-8 bottom-0 px-4 bg-white">
+              <div className="sticky flex flex-col items-center gap-8 bottom-0 bg-white">
                 {!chatStarted && (
                   <div className="flex gap-3 items-center">
                     <LangGraphLogoSVG className="flex-shrink-0 h-8" />
diff --git a/src/components/thread/messages/human.tsx b/src/components/thread/messages/human.tsx
index e6ca4c5..ac6974b 100644
--- a/src/components/thread/messages/human.tsx
+++ b/src/components/thread/messages/human.tsx
@@ -84,7 +84,7 @@ export function HumanMessage({
             onSubmit={handleSubmitEdit}
           />
         ) : (
-          <p className="text-right px-4 py-2 rounded-3xl bg-muted w-fit ml-auto">
+          <p className="px-4 py-2 rounded-3xl bg-muted w-fit ml-auto whitespace-pre-wrap">
             {contentString}
           </p>
         )}
diff --git a/src/components/thread/messages/tool-calls.tsx b/src/components/thread/messages/tool-calls.tsx
index 816a440..2425f68 100644
--- a/src/components/thread/messages/tool-calls.tsx
+++ b/src/components/thread/messages/tool-calls.tsx
@@ -44,7 +44,7 @@ export function ToolCalls({
                       </td>
                       <td className="px-4 py-2 text-sm text-gray-500">
                         {isComplexValue(value) ? (
-                          <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
+                          <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm break-all">
                             {JSON.stringify(value, null, 2)}
                           </code>
                         ) : (
@@ -148,7 +148,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
                           </td>
                           <td className="px-4 py-2 text-sm text-gray-500">
                             {isComplexValue(value) ? (
-                              <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
+                              <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm break-all">
                                 {JSON.stringify(value, null, 2)}
                               </code>
                             ) : (