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

Feat/improve mobile display (#843)

Browse Source 
* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-23 19:53:35 +02:00
committed by GitHub
parent 742791bd92
commit 21d5133564
45 changed files with 464 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/modules/command-menu/components/CommandMenuStyles.tsx
View File

@ -1,6 +1,8 @@
import styled from '@emotion/styled';
import { Command } from 'cmdk';
import { useIsMobile } from '@/ui/hooks/useIsMobile';
export const StyledDialog = styled(Command.Dialog)`
background: ${({ theme }) => theme.background.primary};
border-radius: ${({ theme }) => theme.border.radius.md};
@ -13,8 +15,9 @@ export const StyledDialog = styled(Command.Dialog)`
padding: ${({ theme }) => theme.spacing(1)};
position: fixed;
top: 30%;
transform: translateX(-50%);
width: 100%;
transform: ${() =>
useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'};
width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')};
z-index: 1000;
`;