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

Search dialog fullscreen on mobile (#5765)

Browse Source 
I changed the visibility of the search dialog to make it full screen on
mobile, this should already be ok but I couldn't try it on mobile, so I
just used devtools, if I need to do something else on this PR just tell
me :)
This PR aims to fix: #5746

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
RobertoSimonini1
2024-06-07 17:09:09 +02:00
committed by GitHub
parent 908990315d
commit e9cf449706
4 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,19 +35,16 @@ import { CommandMenuItem } from './CommandMenuItem';
export const StyledDialog = styled.div`
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.superHeavy};
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
font-family: ${({ theme }) => theme.font.family};
left: 50%;
max-width: 640px;
height: 100%;
overflow: hidden;
padding: 0;
position: fixed;
top: 30%;
transform: ${() =>
useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'};
width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')};
right: 0%;
top: 0%;
width: ${() => (useIsMobile() ? '100%' : '500px')};
z-index: 1000;
`;
@ -60,7 +57,8 @@ export const StyledInput = styled.input`
font-size: ${({ theme }) => theme.font.size.lg};
margin: 0;
outline: none;
padding: ${({ theme }) => theme.spacing(5)};
height: 24px;
padding: ${({ theme }) => theme.spacing(4)};
width: ${({ theme }) => `calc(100% - ${theme.spacing(10)})`};
&::placeholder {
@ -80,8 +78,6 @@ const StyledCancelText = styled.span`
export const StyledList = styled.div`
background: ${({ theme }) => theme.background.secondary};
height: 400px;
max-height: 400px;
overscroll-behavior: contain;
transition: 100ms ease;
transition-property: height;
@ -119,6 +115,8 @@ export const CommandMenu = () => {
setCommandMenuSearch(event.target.value);
};
const isMobile = useIsMobile();
useScopedHotkeys(
'ctrl+k,meta+k',
() => {
@ -267,7 +265,7 @@ export const CommandMenu = () => {
placeholder="Search"
onChange={handleSearchChange}
/>
<StyledCancelText>Esc to cancel</StyledCancelText>
{!isMobile && <StyledCancelText>Esc to cancel</StyledCancelText>}
<StyledList>
<ScrollWrapper>
<StyledInnerList>