admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added max-height to innerlist to get scrolling behaviour (#6541)

Browse Source 
Fixes #6538 



https://github.com/user-attachments/assets/c9ecf96d-9d37-4a91-a08e-e0f882ecea62

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
nitin
2024-08-05 18:39:19 +05:30
committed by GitHub
parent dcf938f2c9
commit d23e5f18c3
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -35,6 +35,10 @@ import { Avatar, IconNotes, IconSparkles, IconX, isDefined } from 'twenty-ui';
import { getLogoUrlFromDomainName } from '~/utils'; import { getLogoUrlFromDomainName } from '~/utils';
import { generateILikeFiltersForCompositeFields } from '~/utils/array/generateILikeFiltersForCompositeFields'; import { generateILikeFiltersForCompositeFields } from '~/utils/array/generateILikeFiltersForCompositeFields';
const SEARCH_BAR_HEIGHT = 56;
const SEARCH_BAR_PADDING = 3;
const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
const StyledCommandMenu = styled.div` const StyledCommandMenu = styled.div`
background: ${({ theme }) => theme.background.secondary}; background: ${({ theme }) => theme.background.secondary};
border-left: 1px solid ${({ theme }) => theme.border.color.medium}; border-left: 1px solid ${({ theme }) => theme.border.color.medium};
@ -59,12 +63,12 @@ const StyledInputContainer = styled.div`
display: flex; display: flex;
font-size: ${({ theme }) => theme.font.size.lg}; font-size: ${({ theme }) => theme.font.size.lg};
height: 56px; height: ${SEARCH_BAR_HEIGHT}px;
margin: 0; margin: 0;
outline: none; outline: none;
position: relative; position: relative;
padding: 0 ${({ theme }) => theme.spacing(3)}; padding: 0 ${({ theme }) => theme.spacing(SEARCH_BAR_PADDING)};
`; `;
const StyledInput = styled.input` const StyledInput = styled.input`
@ -99,7 +103,13 @@ const StyledList = styled.div`
transition-property: height; transition-property: height;
`; `;
const StyledInnerList = styled.div` const StyledInnerList = styled.div<{ isMobile: boolean }>`
max-height: ${({ isMobile }) =>
isMobile
? `calc(100dvh - ${SEARCH_BAR_HEIGHT}px - ${
SEARCH_BAR_PADDING * 2
}px - ${MOBILE_NAVIGATION_BAR_HEIGHT}px)`
: `calc(100dvh - ${SEARCH_BAR_HEIGHT}px - ${SEARCH_BAR_PADDING * 2}px)`};
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
padding-top: ${({ theme }) => theme.spacing(1)}; padding-top: ${({ theme }) => theme.spacing(1)};
@ -340,7 +350,7 @@ export const CommandMenu = () => {
</StyledInputContainer> </StyledInputContainer>
<StyledList> <StyledList>
<ScrollWrapper> <ScrollWrapper>
<StyledInnerList> <StyledInnerList isMobile={isMobile}>
<SelectableList <SelectableList
selectableListId="command-menu-list" selectableListId="command-menu-list"
selectableItemIdArray={selectableItemIds} selectableItemIdArray={selectableItemIds}