tweaks

Author: anicioalexandre

packages/components/modules/messages/CreateChatRoomList/index.tsx

@@ -102,7 +102,8 @@ const CreateChatRoomList: FC<CreateChatRoomListProps> = ({
       <Virtuoso
         data={profiles}
         itemContent={(_index, item) => renderItem(item)}
-        style={{ scrollbarWidth: 'none' }}
+        // TODO: look for a better way to calculate the height, it doesn't consider different types of headers
+        style={{ scrollbarWidth: 'none', maxHeight: 'calc(100vh - 72px - 57px - 61px - 72px)' }}
         components={{
           Footer: renderLoadingState,
         }}

packages/components/modules/messages/CreateGroup/ConnectionsList/index.tsx

@@ -45,7 +45,7 @@ const ConnectionsList: FC<ConnectionsListProps> = ({
     <Virtuoso
       data={profiles}
       itemContent={(_index, item) => renderItem(item)}
-      style={{ scrollbarWidth: 'none' }}
+      style={{ scrollbarWidth: 'none', maxHeight: '250px' }}
       components={{
         Footer: renderLoadingState,
       }}

packages/components/modules/messages/CreateGroup/index.tsx

@@ -33,7 +33,12 @@ import {
   DEFAULT_IMAGE_MAX_SIZE,
   FORM_VALUE,
 } from './constants'
-import { HeaderContainer, SearchbarContainer, UploadProfileContainer } from './styled'
+import {
+  HeaderContainer,
+  ProfilesContainer,
+  SearchbarContainer,
+  UploadProfileContainer,
+} from './styled'
 import { CreatGroupUpload, CreateGroupProps } from './types'
 import { getImageUrl } from './utils'
 
@@ -281,7 +286,7 @@ const CreateGroup: FC<CreateGroupProps> = ({
           />
         </Box>
       </Box>
-      <Box height="100%" width="100%" sx={{ overflowY: 'auto', scrollbarWidth: 'none' }}>
+      <ProfilesContainer>
         <SearchbarContainer>
           <Searchbar
             name="search"
@@ -304,7 +309,9 @@ const CreateGroup: FC<CreateGroupProps> = ({
             >
               Members
             </Typography>
-            {participants.map((member) => renderItem(member, true))}
+            <Box maxHeight={250} overflow="auto" sx={{ scrollbarWidth: 'none' }}>
+              {participants.map((member) => renderItem(member, true))}
+            </Box>
           </Box>
           <Box
             role="list"
@@ -329,7 +336,7 @@ const CreateGroup: FC<CreateGroupProps> = ({
             {...ConnectionsListProps}
           />
         </Box>
-      </Box>
+      </ProfilesContainer>
     </>
   )
 }

packages/components/modules/messages/CreateGroup/styled.tsx

@@ -24,3 +24,14 @@ export const UploadProfileContainer = styled(Box)(({ theme }) => ({
   gap: theme.spacing(2),
   padding: theme.spacing(1.5),
 }))
+
+export const ProfilesContainer = styled(Box)(({ theme }) => ({
+  height: '100%',
+  width: '100%',
+  overflowY: 'auto',
+  scrollbarWidth: 'none',
+  [theme.breakpoints.down('sm')]: {
+    // TODO: look for a better way to calculate the height, it doesn't consider different types of headers
+    height: `calc(100vh - 72px - 57px - 305px)`,
+  },
+}))