fix: REST Playground padding

- add scroll wrapper - add nested container. used to apply max height to vue app. otherwise, the bottom padding is not seen
twentyhq · Feb 24, 2025 · 371b7a8 · 371b7a8
1 parent fef78f0
commit 371b7a8
Showing 1 changed file with 32 additions and 8 deletions.
diff --git a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx
@@ -1,6 +1,9 @@
 import { PlaygroundPage } from '@/settings/playground/components/PlaygroundPage';
 import { openAPIReferenceState } from '@/settings/playground/states/openAPIReference';
 import { SettingsPath } from '@/types/SettingsPath';
+import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/components/PageHeader';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
 import { ApiReferenceReact } from '@scalar/api-reference-react';
 import '@scalar/api-reference-react/style.css';
@@ -9,6 +12,20 @@ import { useRecoilState } from 'recoil';
 import { ThemeContext } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
+const StyledNestedContainer = styled.div<{ pageBarHeight: number }>`
+  height: 100%;
+  width: 100%;
+
+  > * {
+    max-height: ${({ theme, pageBarHeight }) =>
+      `calc(
+        100dvh 
+        - ${pageBarHeight * 3}px 
+        - ${theme.spacing(3)}
+      ) !important`};
+  }
+`;
+
 export const RestPlayground = () => {
   const [openAPIReference] = useRecoilState(openAPIReferenceState);
   const { theme } = useContext(ThemeContext);
@@ -27,14 +44,21 @@ export const RestPlayground = () => {
         { children: <Trans>Rest API Playground</Trans> },
       ]}
     >
-      <ApiReferenceReact
-        configuration={{
-          spec: {
-            content: openAPIReference,
-          },
-          forceDarkModeState: theme.name as 'dark' | 'light',
-        }}
-      />
+      <ScrollWrapper
+        contextProviderName="playgroundPageContainer"
+        componentInstanceId={'scroll-wrapper-playground-page-container'}
+      >
+        <StyledNestedContainer pageBarHeight={PAGE_BAR_MIN_HEIGHT}>
+          <ApiReferenceReact
+            configuration={{
+              spec: {
+                content: openAPIReference,
+              },
+              forceDarkModeState: theme.name as 'dark' | 'light',
+            }}
+          />
+        </StyledNestedContainer>
+      </ScrollWrapper>
     </PlaygroundPage>
   );
 };