Merge pull request #180 from OpenAssistantGPT/feat/post-message-on-pa…

…rent-for-message feat: update margin in messages
OpenAssistantGPT · Nov 28, 2024 · 175c8ac · 175c8ac
2 parents 2a1d5f0 + 57d293f
commit 175c8ac
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/kind-zebras-call.md b/.changeset/kind-zebras-call.md
@@ -0,0 +1,5 @@
+---
+'@openassistantgpt/ui': patch
+---
+
+Update marging and padding issue
diff --git a/packages/ui/components/chat-message.tsx b/packages/ui/components/chat-message.tsx
@@ -61,13 +61,15 @@ export function ChatMessage({
               background: chatbot.userReplyBackgroundColor,
               fontSize, // Apply font size in pixels here
             }}
-            className="p-2 rounded-lg mr-3 whitespace-pre-wrap"
+            className={`p-2 rounded-lg whitespace-pre-wrap ${
+              withChatMessageIcon ? 'mr-4' : 'mr-3'
+            }`}
             dir={getDirection(chatbot.rightToLeftLanguage)} // Set text direction
           >
             <svg
               fill={chatbot.userReplyBackgroundColor}
               className={`absolute bottom-[0px] ${
-                chatbot.withChatMessageIcon ? 'right-14' : 'right-2'
+                chatbot.withChatMessageIcon ? 'right-11' : 'right-2'
               }`}
               height="14"
               width="13"
@@ -80,7 +82,7 @@ export function ChatMessage({
           {withChatMessageIcon && (
             <div
               className={cn(
-                'flex size-8 shrink-0 mr-4 select-none items-center justify-center rounded-md border shadow',
+                'flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
                 'bg-background',
               )}
             >

diff --git a/packages/ui/components/chat.tsx b/packages/ui/components/chat.tsx
@@ -249,7 +249,7 @@ export function OpenAssistantGPTChat({
           <div
             ref={messagesContainerRef}
             className={cn(
-              'pb-[200px] overflow-auto max-h-max pl-2 pr-2 sm:pl-20 sm:pr-20 md:pb-[100px] pt-4 md:pt-10',
+              'pb-[200px] overflow-auto max-h-max pl-6 pr-6 sm:pl-20 sm:pr-20 md:pb-[100px] pt-4 md:pt-10',
               className,
             )}
           >