fixed issue Refine Settings Layout (#3429)

* fixed issue Refine Settings Layout

* fixed width and issue

* Fix according to review

* Fix

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 
 import { AuthModal } from '@/auth/components/Modal';
@@ -11,8 +12,12 @@ import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
 import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
+import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
 
 const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
@@ -39,7 +44,7 @@ const StyledLayout = styled.div`
   }
 `;
 
-const StyledPageContainer = styled.div`
+const StyledPageContainer = styled(motion.div)`
   display: flex;
   flex: 1 1 auto;
   flex-direction: row;
@@ -63,7 +68,9 @@ type DefaultLayoutProps = {
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
   const theme = useTheme();
+  const widowsWidth = useScreenSize().width;
   return (
     <>
       <Global
@@ -76,7 +83,20 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
       <StyledLayout>
         <CommandMenu />
         <KeyboardShortcutMenu />
-        <StyledPageContainer>
+
+        <StyledPageContainer
+          animate={{
+            marginLeft:
+              isSettingsPage && !isMobile
+                ? (widowsWidth -
+                    (objectSettingsWidth + desktopNavDrawerWidths.menu + 64)) /
+                  2
+                : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.normal,
+          }}
+        >
           <StyledAppNavigationDrawer />
           <StyledMainContainer>
             {onboardingStatus &&

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

@@ -19,8 +19,8 @@ const StyledMainContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
   min-height: 0;
   padding-bottom: ${({ theme }) => theme.spacing(3)};
-  padding-left: 0;
   padding-right: ${({ theme }) => theme.spacing(3)};
+  padding-left: 0;
   width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {