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/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>
   );