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/ui/layout/page/components/DefaultLayout.tsx

@@ -80,14 +80,16 @@ export const DefaultLayout = () => {
         <AppErrorBoundary FallbackComponent={AppFullScreenErrorFallback}>
           <StyledPageContainer
             animate={{
-              marginLeft:
+              transform:
                 isSettingsPage && !isMobile && !useShowFullScreen
-                  ? (windowsWidth -
-                      (OBJECT_SETTINGS_WIDTH +
-                        NAV_DRAWER_WIDTHS.menu.desktop.expanded +
-                        76)) /
-                    2
-                  : 0,
+                  ? `translateX(${
+                      (windowsWidth -
+                        (OBJECT_SETTINGS_WIDTH +
+                          NAV_DRAWER_WIDTHS.menu.desktop.expanded +
+                          76)) /
+                      2
+                    }px)`
+                  : 'translateX(0)',
             }}
             transition={{
               duration: theme.animation.duration.normal,

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -92,6 +92,7 @@ type PageHeaderProps = {
   onClosePage?: () => void;
   Icon?: IconComponent;
   children?: ReactNode;
+  className?: string;
 };
 
 export const PageHeader = ({
@@ -100,6 +101,7 @@ export const PageHeader = ({
   onClosePage,
   Icon,
   children,
+  className,
 }: PageHeaderProps) => {
   const isMobile = useIsMobile();
   const theme = useTheme();
@@ -108,7 +110,7 @@ export const PageHeader = ({
   );
 
   return (
-    <StyledTopBarContainer>
+    <StyledTopBarContainer className={className}>
       <StyledLeftContainer>
         {!isMobile && !isNavigationDrawerExpanded && (
           <StyledTopBarButtonContainer>