wip: api playground fixes (#11345)

# ISSUE 
- closes #10926 

- [x] fix paddings
- [x] fix page change to playground animation
- [x] fixes multiple skeletons issues

---

- Also was showing multiple skeletons on reloading, **before**: 


https://github.com/user-attachments/assets/0cdef639-c121-4cbb-b056-b89e60862c54

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx

@@ -1,5 +1,6 @@
 import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState';
 import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
+import styled from '@emotion/styled';
 import { explorerPlugin } from '@graphiql/plugin-explorer';
 import '@graphiql/plugin-explorer/dist/style.css';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
@@ -7,8 +8,8 @@ import { GraphiQL } from 'graphiql';
 import 'graphiql/graphiql.css';
 import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { ThemeContext } from 'twenty-ui/theme';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 type GraphQLPlaygroundProps = {
   onError(): void;
@@ -20,6 +21,16 @@ export const schemaToPath = {
   [PlaygroundSchemas.METADATA]: 'metadata',
 };
 
+const StyledGraphiQLContainer = styled.div`
+  height: 100%;
+  width: 100%;
+
+  .graphiql-container {
+    background: ${({ theme }) => theme.background.primary};
+    border-radius: ${({ theme }) => theme.border.radius.md};
+  }
+`;
+
 export const GraphQLPlayground = ({
   onError,
   schema,
@@ -43,13 +54,15 @@ export const GraphQLPlayground = ({
   });
 
   return (
-    <GraphiQL
-      forcedTheme={theme.name as 'light' | 'dark'}
-      plugins={[explorer]}
-      fetcher={fetcher}
-      defaultHeaders={JSON.stringify({
-        Authorization: `Bearer ${playgroundApiKey}`,
-      })}
-    />
+    <StyledGraphiQLContainer>
+      <GraphiQL
+        forcedTheme={theme.name as 'light' | 'dark'}
+        plugins={[explorer]}
+        fetcher={fetcher}
+        defaultHeaders={JSON.stringify({
+          Authorization: `Bearer ${playgroundApiKey}`,
+        })}
+      />
+    </StyledGraphiQLContainer>
   );
 };

packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx

@@ -10,9 +10,23 @@ import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledContainer = styled.div`
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
   height: 100%;
   overflow-y: scroll;
   width: 100%;
+
+  .scalar-api-reference {
+    --scalar-background-1: ${({ theme }) => theme.background.primary};
+    --scalar-background-2: ${({ theme }) => theme.background.secondary};
+    --scalar-background-3: ${({ theme }) => theme.background.tertiary};
+    --scalar-background-accent: ${({ theme }) =>
+      theme.background.transparent.lighter};
+    --scalar-border-color: ${({ theme }) => theme.border.color.medium};
+    --scalar-color-1: ${({ theme }) => theme.font.color.primary};
+    --scalar-color-2: ${({ theme }) => theme.font.color.secondary};
+    --scalar-color-3: ${({ theme }) => theme.font.color.tertiary};
+  }
 `;
 
 const ApiReferenceReact = lazy(() =>