fix: mobile chat layout

src/components/Chat/Sidebar/Sidebar.tsx

@@ -10,13 +10,7 @@ export interface ISidebarComposition {
 
 const Sidebar: React.FC<GridItemProps> & ISidebarComposition = props => {
   return (
-    <GridItem
+    <GridItem pt='7rem' borderRightWidth={{ base: '0', lg: '1px' }} px={{ base: '0', lg: '3' }} {...props}>
-      pt='7rem'
-      borderRightWidth={{ base: '0', lg: '1px' }}
-      width={{ base: 'full', lg: '400px' }}
-      px={{ base: '0', lg: '3' }}
-      {...props}
-    >
       {props.children}
     </GridItem>
   );

src/components/Chat/Sidebar/Users/User/Info.tsx

@@ -16,12 +16,12 @@ const Info: React.FC<IInfoProps> = ({ fullname, lastMessage }) => {
 
   return (
     <Box ml='4' maxW='200px'>
-      <Text fontWeight={'semibold'} textOverflow={'ellipsis'} overflow={'hidden'} whiteSpace='nowrap'>
+      <Text fontWeight={'semibold'}>
         {isMe ? 'Favorites' : fullname} <br />
         {lastMessage && (
-          <Text as={'span'} fontWeight='normal' fontSize={'sm'} color='gray.500'>
+          <Text as={'span'} fontWeight='normal' fontSize={'sm'} color='gray.500' wordBreak={'break-all'}>
             {lastMessage.from === me?.id && `You: `}
-            {lastMessage.content}
+            {lastMessage.content.length >= 20 ? lastMessage.content.slice(0, 20 - 1) + '...' : lastMessage.content}
           </Text>
         )}
       </Text>

src/components/Chat/Window/Message/Avatar.tsx

@@ -7,7 +7,7 @@ export interface IAvatarProps {
 
 const Avatar: React.FC<IAvatarProps> = memo(({ fullname: name }) => {
   return (
-    <WrapItem>
+    <WrapItem alignSelf={'flex-start'}>
       <ChakraAvatar name={name} size={'sm'} />
     </WrapItem>
   );

src/components/Chat/Window/Message/Text.tsx

@@ -14,7 +14,7 @@ const Text: React.FC<ITextProps> = ({ content, time }) => {
 
   return (
     <Box mx={'4'} maxW={'450px'} bg={bgColor} borderRadius='3xl' px='6' py='3'>
-      <ChakraText fontSize={'15px'}>
+      <ChakraText fontSize={'15px'} wordBreak='break-all'>
         {content}
         <Box
           as='time'

src/components/Chat/Window/Window.tsx

@@ -32,7 +32,7 @@ import { useRootStore } from '@educt/hooks/useRootStore';
 import { useHistory } from 'react-router-dom';
 
 const Wrapper: React.FC<GridItemProps> = props => (
-  <GridItem pt={'7rem'} pb='5' px='12' {...props}>
+  <GridItem pt={'7rem'} pb='5' px={{ base: '4', lg: '12' }} {...props}>
     {props.children}
   </GridItem>
 );
@@ -192,7 +192,6 @@ const Window: React.FC = props => {
               resize={'block'}
               type='text'
               placeholder='Write a message...'
-              maxW='900px'
               variant={'outline'}
               rounded='xl'
               mr='2'

src/pages/main/main.tsx

@@ -40,6 +40,8 @@ const MainPage: React.FC<IPageProps> = () => {
 
   if (me === null || courses === null || stat === null) return <LoadingPage />;
 
+  const unreadMessages = me.notifications.filter(n => n.type === 'MESSAGE');
+
   return (
     <Page>
       <Page.Heading heading={`👋 Hello ${me.first_name},`} description="This what we've got today for you." />
@@ -58,7 +60,7 @@ const MainPage: React.FC<IPageProps> = () => {
             <StatContent>
               <StatNumber>
                 <Link as={ReactRouterLink} to='/messages'>
-                  0
+                  {unreadMessages.length}
                 </Link>
               </StatNumber>
               <StatIcon icon={MdOutlineMessage} />