From 1080dd7ee3bea456b24b6681a6a8a55e25921a66 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 13 Apr 2022 19:20:57 +0200
Subject: [PATCH] fix(react): messages truncating

---
 .../src/routes/chat/components/chat-input/index.tsx  | 12 +++++++-----
 .../chat/components/chat-input/input-reply.tsx       |  4 ++--
 .../routes/chat/components/chat-message/index.tsx    |  6 +++---
 .../chat/components/chat-message/message-reply.tsx   | 11 ++---------
 packages/status-react/src/routes/chat/index.tsx      |  3 +++
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/packages/status-react/src/routes/chat/components/chat-input/index.tsx b/packages/status-react/src/routes/chat/components/chat-input/index.tsx
index 4985e943..bfa18811 100644
--- a/packages/status-react/src/routes/chat/components/chat-input/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-input/index.tsx
@@ -6,7 +6,7 @@ import { GifIcon } from '~/src/icons/gif-icon'
 import { ImageIcon } from '~/src/icons/image-icon'
 import { StickerIcon } from '~/src/icons/sticker-icon'
 import { styled } from '~/src/styles/config'
-import { Flex, IconButton } from '~/src/system'
+import { Box, Flex, IconButton } from '~/src/system'
 
 import { InputReply } from './input-reply'
 
@@ -34,9 +34,11 @@ export const ChatInput = (props: Props) => {
 
   return (
     <Wrapper>
-      <IconButton label="Add file">
-        <ImageIcon />
-      </IconButton>
+      <Box css={{ paddingBottom: 6 }}>
+        <IconButton label="Add file" color="gray">
+          <ImageIcon />
+        </IconButton>
+      </Box>
       <Bubble>
         {state.message && <InputReply message={state.message} />}
         <InputWrapper>
@@ -67,7 +69,7 @@ const Wrapper = styled('div', {
   display: 'flex',
   overflow: 'hidden',
   alignItems: 'flex-end',
-  padding: '12px 8px 12px 10px',
+  padding: '12px 8px 12px 4px',
   gap: 4,
 })
 
diff --git a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
index 47fc353d..7463bdbf 100644
--- a/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-input/input-reply.tsx
@@ -38,7 +38,7 @@ export const InputReply = (props: Props) => {
       </Flex>
       {message.type === 'text' && (
         <Flex>
-          <Text size="13" truncate={false}>
+          <Text size="13" truncate>
             {message.text}
           </Text>
         </Flex>
@@ -56,7 +56,7 @@ export const InputReply = (props: Props) => {
       {message.type === 'image-text' && (
         <Box>
           <Flex>
-            <Text size="13" truncate={false}>
+            <Text size="13" truncate>
               {message.text}
             </Text>
           </Flex>
diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
index b8a70887..e4f73108 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/index.tsx
@@ -65,7 +65,7 @@ export const ChatMessage = (props: Props) => {
       <Wrapper>
         <Avatar size={44} />
         <Box>
-          <ChatInput value={text} />
+          <ChatInput value={message?.text} />
           <Flex gap={2}>
             <Button
               variant="outline"
@@ -153,11 +153,11 @@ export const ChatMessage = (props: Props) => {
                   <Avatar size={44} src={contact.imageUrl} />
                 </button>
                 <DropdownMenu>
-                  <div>
+                  <Flex direction="column" align="center" gap="1">
                     <Avatar size="36" src={contact.imageUrl} />
                     <Text>{contact.name}</Text>
                     <EmojiHash />
-                  </div>
+                  </Flex>
                   <DropdownMenu.Separator />
                   <DropdownMenu.Item icon={<BellIcon />}>
                     View Profile
diff --git a/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx b/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
index 2436e880..a2b6b18f 100644
--- a/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
+++ b/packages/status-react/src/routes/chat/components/chat-message/message-reply.tsx
@@ -24,14 +24,7 @@ export const MessageReply = (props: Props) => {
       </Flex>
       {reply.type === 'text' && (
         <Flex>
-          <Text
-            color="gray"
-            size="13"
-            truncate={false}
-            css={{
-              lineClamp: 1,
-            }}
-          >
+          <Text color="gray" size="13" truncate>
             {reply.text}
           </Text>
         </Flex>
@@ -50,7 +43,7 @@ export const MessageReply = (props: Props) => {
       )}
       {reply.type === 'image-text' && (
         <Flex direction="column" gap={1}>
-          <Text color="gray" size="13" truncate={false}>
+          <Text color="gray" size="13" truncate>
             {reply.text}
           </Text>
           <Image
diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx
index ef39483a..131cfb4a 100644
--- a/packages/status-react/src/routes/chat/index.tsx
+++ b/packages/status-react/src/routes/chat/index.tsx
@@ -78,6 +78,8 @@ const Wrapper = styled('div', {
   display: 'flex',
   alignItems: 'stretch',
   background: '#fff',
+  maxWidth: '100%',
+  minWidth: 1,
 })
 
 const ContentWrapper = styled('div', {
@@ -98,4 +100,5 @@ const Main = styled('div', {
   flex: 1,
   display: 'flex',
   flexDirection: 'column',
+  minWidth: 1,
 })