diff --git a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx index 4e019f7bf..432bf569c 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { objectSettingsWidth } from '../data-model/constants/objectSettings'; +import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; const StyledSettingsPageContainer = styled.div<{ width?: number }>` display: flex; @@ -8,7 +8,7 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>` gap: ${({ theme }) => theme.spacing(8)}; overflow: auto; padding: ${({ theme }) => theme.spacing(8)}; - width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)}; + width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth + 'px')}; `; export { StyledSettingsPageContainer as SettingsPageContainer }; diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts b/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts index fe8e177c3..7ce71edd0 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts @@ -1 +1 @@ -export const objectSettingsWidth = '512px'; +export const objectSettingsWidth = 512; diff --git a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx index 932d19cfe..7fbf374d8 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx +++ b/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 ( <> { - + + {onboardingStatus && diff --git a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx index d7fcdd173..eb99145e4 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx +++ b/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) { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx index 9eda443f5..cb2f0f822 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx @@ -33,7 +33,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>` flex-direction: column; gap: ${({ theme }) => theme.spacing(8)}; height: 100%; - min-width: ${desktopNavDrawerWidths.menu}; + min-width: ${desktopNavDrawerWidths.menu}px; padding: ${({ theme }) => theme.spacing(3, 2, 4)}; ${({ isSubMenu, theme }) => @@ -80,9 +80,7 @@ export const NavigationDrawer = ({ const desktopWidth = !isNavigationDrawerOpen ? 12 - : isSubMenu - ? desktopNavDrawerWidths.submenu - : desktopNavDrawerWidths.menu; + : desktopNavDrawerWidths.menu; const mobileWidth = isNavigationDrawerOpen ? '100%' : 0; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts index 0bbef5f37..262bd15e3 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts @@ -1,4 +1,3 @@ export const desktopNavDrawerWidths = { - menu: '236px', - submenu: '536px', + menu: 236, }; diff --git a/packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts b/packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts new file mode 100644 index 000000000..2363af5db --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts @@ -0,0 +1,25 @@ +import { useEffect, useState } from 'react'; + +export const useScreenSize = () => { + const [screenSize, setScreenSize] = useState({ + width: window.innerWidth, + height: window.innerHeight, + }); + + useEffect(() => { + const handleResize = () => { + setScreenSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + return screenSize; +}; diff --git a/packages/twenty-front/src/pages/settings/SettingsProfile.tsx b/packages/twenty-front/src/pages/settings/SettingsProfile.tsx index 1cf55e69a..f97aba94e 100644 --- a/packages/twenty-front/src/pages/settings/SettingsProfile.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsProfile.tsx @@ -17,7 +17,7 @@ const StyledH1Title = styled(H1Title)` export const SettingsProfile = () => ( - +
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx index e3f82fd60..a9dd3f3e8 100644 --- a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx @@ -17,7 +17,7 @@ const StyledH1Title = styled(H1Title)` export const SettingsWorkspace = () => ( - +
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx index 4b4a3623d..3fa972aaf 100644 --- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx +++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx @@ -53,7 +53,7 @@ export const SettingsWorkspaceMembers = () => { return ( - + {currentWorkspace?.inviteHash && (
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx index 225fcdab8..881b0b4f6 100644 --- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx +++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; -import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings'; +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow'; import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem'; import { formatExpirations } from '@/settings/developers/utils/format-expiration'; @@ -19,8 +19,6 @@ import { TableRow } from '@/ui/layout/table/components/TableRow'; const StyledContainer = styled.div` height: fit-content; - padding: ${({ theme }) => theme.spacing(8)}; - width: ${objectSettingsWidth}; `; const StyledTableRow = styled(TableRow)` @@ -62,41 +60,43 @@ export const SettingsDevelopersApiKeys = () => { return ( - - - -