fix: Set max width of chatting message, Change chatting message layout (

#117)
capstone-maru · May 30, 2024 · e6b131e · e6b131e
1 parent 59870fb
commit e6b131e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git a/src/components/chat/ChattingRoom.tsx b/src/components/chat/ChattingRoom.tsx
@@ -88,13 +88,15 @@ const styles = {
   senderFrame: styled.div`
     display: flex;
     width: 20rem;
+    max-width: 20rem;
     justify-content: flex-end;
     padding-right: 0.8rem;
     margin: 0.8rem 0 0.8rem 5rem;
   `,
   receiverFrame: styled.div`
     display: flex;
     width: 23rem;
+    max-width: 20rem;
     justify-content: flex-start;
     padding-left: 0.8rem;
     margin: 0.8rem 0;

diff --git a/src/components/chat/ReceiverMessage.tsx b/src/components/chat/ReceiverMessage.tsx
@@ -77,21 +77,23 @@ const styles = {
   `,
   messageBody: styled.div`
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
-    gap: 0.5rem;
+    max-width: 20rem;
+    gap: 0.25rem;
   `,
   message: styled.div`
-    display: flex;
-    width: 80%;
-    flex-direction: column;
-    align-items: flex-start;
+    width: 100%;
+    max-width: 20rem;
     gap: 0.625rem;
     color: var(--Text-gray, #666668);
     font-family: 'Noto Sans KR';
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
+    word-break: break-word;
+    white-space: pre-wrap;
   `,
   time: styled.p`
     color: var(--Text-gray, #666668);
@@ -138,9 +140,7 @@ export function ReceiverMessage({
           <styles.messageFrame>
             <styles.messageBody>
               <styles.message>{message}</styles.message>
-              <styles.messageInfo>
-                <styles.time>{getLocalTime(time, type)}</styles.time>
-              </styles.messageInfo>
+              <styles.time>{getLocalTime(time, type)}</styles.time>
             </styles.messageBody>
           </styles.messageFrame>
         </styles.right>

diff --git a/src/components/chat/SenderMessage.tsx b/src/components/chat/SenderMessage.tsx
@@ -24,21 +24,22 @@ const styles = {
   `,
   messageBody: styled.div`
     display: flex;
+    flex-direction: column;
     align-items: flex-end;
-    gap: 0.5rem;
+    max-width: 20rem;
+    gap: 0.25rem;
   `,
-  message: styled.div`
-    display: flex;
-    width: 85%;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.625rem;
+  message: styled.p`
+    width: 100%;
+    max-width: 20rem;
     color: var(--White, #fff);
     font-family: 'Noto Sans KR';
     font-size: 0.875rem;
     font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
+    word-break: break-word;
+    white-space: pre-wrap;
   `,
   messageInfo: styled.div`
     display: flex;
@@ -95,9 +96,7 @@ export function SenderMessage({
         <styles.messageFrame>
           <styles.messageBody>
             <styles.message>{message} </styles.message>
-            <styles.messageInfo>
-              <styles.time>{getLocalTime(time, type)}</styles.time>
-            </styles.messageInfo>
+            <styles.time>{getLocalTime(time, type)}</styles.time>
           </styles.messageBody>
         </styles.messageFrame>
       </styles.right>