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,