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

fix: Developers page is not optimised for mobile viewport (#7493)

Browse Source 
## Description

- This PR solves the issue #7483 
- optimised the developers page for all mobile viewports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Harshit Singh
2024-10-10 11:53:37 +05:30
committed by GitHub
parent c57d8f1346
commit 656ab4ed95
3 changed files with 62 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
View File

@ -1,6 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronRight } from 'twenty-ui';
import { IconChevronRight, MOBILE_VIEWPORT } from 'twenty-ui';
import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
import { TableCell } from '@/ui/layout/table/components/TableCell';
@ -8,6 +8,10 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
export const StyledApisFieldTableRow = styled(TableRow)`
grid-template-columns: 312px auto 28px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
grid-template-columns: 12fr 4fr;
}
`;
const StyledNameTableCell = styled(TableCell)`

16
packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
View File

@ -1,5 +1,3 @@
import styled from '@emotion/styled';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
@ -10,15 +8,25 @@ import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from 'twenty-ui';
const StyledTableBody = styled(TableBody)`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
max-height: 260px;
overflow-y: auto;
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-top: ${({ theme }) => theme.spacing(3)};
display: flex;
justify-content: space-between;
scroll-behavior: smooth;
}
`;
const StyledTableRow = styled(TableRow)`
grid-template-columns: 312px auto 28px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 95%;
grid-template-columns: 20fr 2fr;
}
`;
export const SettingsApiKeysTable = () => {