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

## Description

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

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -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)`

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

@@ -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;
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
-  overflow-y: auto;
+    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 = () => {

packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx

@@ -1,5 +1,6 @@
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
-import { H2Title, IconPlus } from 'twenty-ui';
+import { H2Title, IconPlus, MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
@@ -15,9 +16,20 @@ const StyledButtonContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   padding-top: ${({ theme }) => theme.spacing(2)};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding-top: ${({ theme }) => theme.spacing(5)};
+  }
+`;
+
+const StyledContainer = styled.div<{ isMobile: boolean }>`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: ${({ theme }) => theme.spacing(2)};
 `;
 
 export const SettingsDevelopers = () => {
+  const isMobile = useIsMobile();
   return (
     <SubMenuTopBarContainer
       title="Developers"
@@ -31,6 +43,7 @@ export const SettingsDevelopers = () => {
       ]}
     >
       <SettingsPageContainer>
+        <StyledContainer isMobile={isMobile}>
           <Section>
             <H2Title
               title="API keys"
@@ -63,6 +76,7 @@ export const SettingsDevelopers = () => {
               />
             </StyledButtonContainer>
           </Section>
+        </StyledContainer>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );