From 656ab4ed95e5ebda708fd9dd908b86c756a33e3b Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Thu, 10 Oct 2024 11:53:37 +0530
Subject: [PATCH] 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>
---
 .../SettingsApiKeysFieldItemTableRow.tsx      |  6 +-
 .../components/SettingsApiKeysTable.tsx       | 16 +++-
 .../developers/SettingsDevelopers.tsx         | 76 +++++++++++--------
 3 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
index c8051eab0..d5868b166 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
+++ b/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)`
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
index 6d70ada4c..0d1a9fc12 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
+++ b/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;
-  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 = () => {
diff --git a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
index 6f8f39d43..35ce03669 100644
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
+++ b/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>
-          <H2Title
-            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'}
+        <StyledContainer isMobile={isMobile}>
+          <Section>
+            <H2Title
+              title="API keys"
+              description="Active APIs keys created by you or your team."
             />
-          </StyledButtonContainer>
-        </Section>
-        <Section>
-          <H2Title
-            title="Webhooks"
-            description="Establish Webhook endpoints for notifications on asynchronous events."
-          />
-          <SettingsWebhooksTable />
-          <StyledButtonContainer>
-            <Button
-              Icon={IconPlus}
-              title="Create Webhook"
-              size="small"
-              variant="secondary"
-              to={'/settings/developers/webhooks/new'}
+            <SettingsApiKeysTable />
+            <StyledButtonContainer>
+              <Button
+                Icon={IconPlus}
+                title="Create API key"
+                size="small"
+                variant="secondary"
+                to={'/settings/developers/api-keys/new'}
+              />
+            </StyledButtonContainer>
+          </Section>
+          <Section>
+            <H2Title
+              title="Webhooks"
+              description="Establish Webhook endpoints for notifications on asynchronous events."
             />
-          </StyledButtonContainer>
-        </Section>
+            <SettingsWebhooksTable />
+            <StyledButtonContainer>
+              <Button
+                Icon={IconPlus}
+                title="Create Webhook"
+                size="small"
+                variant="secondary"
+                to={'/settings/developers/webhooks/new'}
+              />
+            </StyledButtonContainer>
+          </Section>
+        </StyledContainer>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );