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,38 +43,40 @@ export const SettingsDevelopers = () => {
       ]}
     >
       <SettingsPageContainer>
-        <Section>
+        <StyledContainer isMobile={isMobile}>
-          <H2Title
+          <Section>
-            title="API keys"
+            <H2Title
-            description="Active APIs keys created by you or your team."
+              title="API keys"
-          />
+              description="Active APIs keys created by you or your team."
-          <SettingsApiKeysTable />
-          <StyledButtonContainer>
-            <Button
-              Icon={IconPlus}
-              title="Create API key"
-              size="small"
-              variant="secondary"
-              to={'/settings/developers/api-keys/new'}
             />
-          </StyledButtonContainer>
+            <SettingsApiKeysTable />
-        </Section>
+            <StyledButtonContainer>
-        <Section>
+              <Button
-          <H2Title
+                Icon={IconPlus}
-            title="Webhooks"
+                title="Create API key"
-            description="Establish Webhook endpoints for notifications on asynchronous events."
+                size="small"
-          />
+                variant="secondary"
-          <SettingsWebhooksTable />
+                to={'/settings/developers/api-keys/new'}
-          <StyledButtonContainer>
+              />
-            <Button
+            </StyledButtonContainer>
-              Icon={IconPlus}
+          </Section>
-              title="Create Webhook"
+          <Section>
-              size="small"
+            <H2Title
-              variant="secondary"
+              title="Webhooks"
-              to={'/settings/developers/webhooks/new'}
+              description="Establish Webhook endpoints for notifications on asynchronous events."
             />
-          </StyledButtonContainer>
+            <SettingsWebhooksTable />
-        </Section>
+            <StyledButtonContainer>
+              <Button
+                Icon={IconPlus}
+                title="Create Webhook"
+                size="small"
+                variant="secondary"
+                to={'/settings/developers/webhooks/new'}
+              />
+            </StyledButtonContainer>
+          </Section>
+        </StyledContainer>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );