fix(react): messages truncating

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,
 })
 

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>

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

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

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,
 })