From f98f804e4964be3d33c9b113e662d551262b649d Mon Sep 17 00:00:00 2001
From: Liam Hongman Cho <liam.cho@sendbird.com>
Date: Fri, 10 May 2024 18:03:50 +0900
Subject: [PATCH] bug: Fixed a bug where sender name is overflowing in a bot
 message. (#209)

- Fixed a bug where sender name is overflowing in a bot message
---
 src/components/BotMessageWithBodyInput.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
index 96ada982f..6afeef6bf 100644
--- a/src/components/BotMessageWithBodyInput.tsx
+++ b/src/components/BotMessageWithBodyInput.tsx
@@ -19,9 +19,14 @@ const Root = styled.span`
   position: relative;
 `;
 
-const Sender = styled(Label)`
-  margin: 0 0 4px 12px;
+const Sender = styled.div`
+  padding: 0 0 4px 12px;
   text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(
+    100% - 12px - 56px
+  ); // -12 for left margin and -56 for timestamp min width.
 `;
 
 const Content = styled.div`
@@ -93,11 +98,13 @@ export default function BotMessageWithBodyInput(props: Props) {
       )}
       <BodyContainer>
         {displaySender && (
-          <Sender
-            type={LabelTypography.CAPTION_2}
-            color={LabelColors.ONBACKGROUND_2}
-          >
-            {botNickname}
+          <Sender>
+            <Label
+              type={LabelTypography.CAPTION_2}
+              color={LabelColors.ONBACKGROUND_2}
+            >
+              {botNickname}
+            </Label>
           </Sender>
         )}
         <Content>