From 7314dc3b6eb455febd21e1909757c5526b68526e Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 30 Oct 2024 12:05:29 -0500
Subject: [PATCH] refine style

---
 src/lib/common/Markdown.svelte                            | 4 ++--
 src/lib/scss/custom/common/_common.scss                   | 3 +++
 src/lib/scss/custom/pages/_chat.scss                      | 1 +
 .../chat/[agentId]/[conversationId]/chat-box.svelte       | 8 +++++---
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/lib/common/Markdown.svelte b/src/lib/common/Markdown.svelte
index 6240cd78..eb107c9b 100644
--- a/src/lib/common/Markdown.svelte
+++ b/src/lib/common/Markdown.svelte
@@ -23,6 +23,6 @@
 	}
 </script>
 
-<span class={`markdown-container ${containerClasses || 'text-white'}`}>
+<div class={`markdown-container ${containerClasses || 'text-white'}`}>
 	{@html displayText}
-</span>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index 5d6e4e06..c5ff3913 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -173,6 +173,9 @@ button:focus {
 }
   
 .markdown-container {
+  overflow-x: auto;
+  scrollbar-width: thin;
+
   pre {
     -ms-overflow-style: none !important;
     white-space: pre-wrap;
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index 14657c35..d9d51a39 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -99,6 +99,7 @@
 
                 .chat-head-agent-icon {
                     height: 80%;
+                    max-height: 25px;
                 }
             }
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 9f1e0734..fec3ff64 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1441,15 +1441,17 @@
 							<div class="col-md-4 col-7 chat-head-info">
 								<div class="chat-head-agent">
 									{#if agent?.icon_url}
-									<img class="chat-head-agent-icon" src={agent.icon_url} alt="">
+									<div class="line-align-center">
+										<img class="chat-head-agent-icon" src={agent.icon_url} alt="">
+									</div>
 									{/if}
-									<div class="chat-head-agent-name">{agent?.name || 'Unkown'}</div>
+									<div class="chat-head-agent-name line-align-center ellipsis">{agent?.name || 'Unkown'}</div>
 								</div>
 								<div class="text-muted mb-0 chat-head-user">
 									<div>
 										<i class="mdi mdi-circle text-success align-middle" />
 									</div>
-									<div>
+									<div class="ellipsis">
 										<span>{conversationUser?.full_name || conversationUser?.user_name || ''}</span>
 									</div>
 								</div>