From 4f4f9b22b75d3ecc6bd80c5232a0a762191fb1b9 Mon Sep 17 00:00:00 2001 From: khuddite Date: Tue, 3 Dec 2024 09:42:43 -0500 Subject: [PATCH 1/7] Lift up justify-content: center to the parent container to avoid conflicts with overflow-y: auto --- .../twenty-front/src/modules/auth/components/AuthModal.tsx | 3 +-- .../src/modules/ui/layout/page/components/DefaultLayout.tsx | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx index 0bef31d15df7..30a932faaf0e 100644 --- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx +++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx @@ -4,13 +4,12 @@ import React from 'react'; const StyledContent = styled(Modal.Content)` align-items: center; - justify-content: center; `; type AuthModalProps = { children: React.ReactNode }; export const AuthModal = ({ children }: AuthModalProps) => ( - + {children} ); diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx index f739decb34bf..f07a0ac78f46 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx @@ -67,6 +67,10 @@ const StyledMainContainer = styled.div` display: flex; flex: 0 1 100%; overflow: hidden; + + .justify-center { + justify-content: center; + } `; export const DefaultLayout = () => { From ea5747e1080987e44ca46ce12f5531b9d8125dbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 6 Dec 2024 12:22:08 +0100 Subject: [PATCH 2/7] Remove container? --- .../src/modules/auth/components/AuthModal.tsx | 3 +- .../layout/page/components/DefaultLayout.tsx | 34 ++++++++----------- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx index 30a932faaf0e..0bef31d15df7 100644 --- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx +++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx @@ -4,12 +4,13 @@ import React from 'react'; const StyledContent = styled(Modal.Content)` align-items: center; + justify-content: center; `; type AuthModalProps = { children: React.ReactNode }; export const AuthModal = ({ children }: AuthModalProps) => ( - + {children} ); diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx index f07a0ac78f46..18bd1928cbc4 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx @@ -67,10 +67,6 @@ const StyledMainContainer = styled.div` display: flex; flex: 0 1 100%; overflow: hidden; - - .justify-center { - justify-content: center; - } `; export const DefaultLayout = () => { @@ -130,24 +126,24 @@ export const DefaultLayout = () => { ) : ( )} - - {showAuthModal ? ( - <> - - - - - - - - - - ) : ( + {showAuthModal ? ( + <> + + + + + + + + + + ) : ( + - )} - + + )} {isMobile && } From 630c6d68fdd1b8665b1ab88b5f47fec52903492f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 6 Dec 2024 14:03:33 +0100 Subject: [PATCH 3/7] Forgot to commit this part --- .../src/modules/ui/layout/modal/components/Modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx index fa5585207593..540f02d8dab4 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx @@ -29,7 +29,8 @@ const StyledModalDiv = styled(motion.div)<{ if (isMobile) return `0`; return theme.border.radius.md; }}; - overflow: hidden; + overflow-x: hidden; + overflow-y: scroll; z-index: 10000; // should be higher than Backdrop's z-index width: ${({ isMobile, size, theme }) => { @@ -79,7 +80,6 @@ const StyledContent = styled.div` flex: 1; flex: 1 1 0%; flex-direction: column; - overflow-y: auto; padding: ${({ theme }) => theme.spacing(10)}; `; From 56baa740f013ec36d0cd728d86952771da2f9be7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 6 Dec 2024 14:04:59 +0100 Subject: [PATCH 4/7] Better to use auto than scroll --- .../src/modules/ui/layout/modal/components/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx index 540f02d8dab4..37d33d7f0989 100644 --- a/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx +++ b/packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx @@ -30,7 +30,7 @@ const StyledModalDiv = styled(motion.div)<{ return theme.border.radius.md; }}; overflow-x: hidden; - overflow-y: scroll; + overflow-y: auto; z-index: 10000; // should be higher than Backdrop's z-index width: ${({ isMobile, size, theme }) => { From 7df2ef5e57faad0e66686ad6f76ce453e68a0895 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Tue, 17 Dec 2024 14:00:31 +0100 Subject: [PATCH 5/7] Dont add scrollwrapper to import modal --- .../src/modules/auth/components/AuthModal.tsx | 5 +- .../scroll/contexts/ScrollWrapperContexts.tsx | 7 +- .../src/pages/onboarding/CreateProfile.tsx | 97 ++++++++++--------- 3 files changed, 60 insertions(+), 49 deletions(-) diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx index 0bef31d15df7..7b33dda3aafa 100644 --- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx +++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx @@ -1,4 +1,5 @@ import { Modal } from '@/ui/layout/modal/components/Modal'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import styled from '@emotion/styled'; import React from 'react'; @@ -11,6 +12,8 @@ type AuthModalProps = { children: React.ReactNode }; export const AuthModal = ({ children }: AuthModalProps) => ( - {children} + + {children} + ); diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx index 1d83d1ddd94b..cf8da625820f 100644 --- a/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx +++ b/packages/twenty-front/src/modules/ui/utilities/scroll/contexts/ScrollWrapperContexts.tsx @@ -18,7 +18,8 @@ export type ContextProviderName = | 'releases' | 'test' | 'showPageActivityContainer' - | 'navigationDrawer'; + | 'navigationDrawer' + | 'modalContent'; const createScrollWrapperContext = (id: string) => createContext({ @@ -51,6 +52,8 @@ export const ShowPageActivityContainerScrollWrapperContext = export const NavigationDrawerScrollWrapperContext = createScrollWrapperContext('navigationDrawer'); export const TestScrollWrapperContext = createScrollWrapperContext('test'); +export const ModalContentScrollWrapperContext = + createScrollWrapperContext('modalContent'); export const getContextByProviderName = ( contextProviderName: ContextProviderName, @@ -82,6 +85,8 @@ export const getContextByProviderName = ( return ShowPageActivityContainerScrollWrapperContext; case 'navigationDrawer': return NavigationDrawerScrollWrapperContext; + case 'modalContent': + return ModalContentScrollWrapperContext; default: throw new Error('Context Provider not available'); } diff --git a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx index ebb0fbc1bd28..e675c943769c 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx +++ b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx @@ -20,6 +20,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; import { OnboardingStatus } from '~/generated/graphql'; import { isDefined } from '~/utils/isDefined'; @@ -161,53 +162,55 @@ export const CreateProfile = () => { description="Your name as it will be displayed on the app" /> {/* TODO: When react-web-hook-form is added to edit page we should create a dedicated component with context */} - - ( - setIsEditingMode(true)} - onBlur={() => { - onBlur(); - setIsEditingMode(false); - }} - onChange={onChange} - placeholder="Tim" - error={error?.message} - fullWidth - /> - )} - /> - ( - setIsEditingMode(true)} - onBlur={() => { - onBlur(); - setIsEditingMode(false); - }} - onChange={onChange} - placeholder="Cook" - error={error?.message} - fullWidth - /> - )} - /> - + + + ( + setIsEditingMode(true)} + onBlur={() => { + onBlur(); + setIsEditingMode(false); + }} + onChange={onChange} + placeholder="Tim" + error={error?.message} + fullWidth + /> + )} + /> + ( + setIsEditingMode(true)} + onBlur={() => { + onBlur(); + setIsEditingMode(false); + }} + onChange={onChange} + placeholder="Cook" + error={error?.message} + fullWidth + /> + )} + /> + + From 33e1c394dd17845103101f33d90ead4e8771d702 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Tue, 17 Dec 2024 14:24:22 +0100 Subject: [PATCH 6/7] Fix --- .../src/pages/onboarding/CreateProfile.tsx | 97 +++++++++---------- 1 file changed, 47 insertions(+), 50 deletions(-) diff --git a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx index e675c943769c..ebb0fbc1bd28 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx +++ b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx @@ -20,7 +20,6 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember'; import { OnboardingStatus } from '~/generated/graphql'; import { isDefined } from '~/utils/isDefined'; @@ -162,55 +161,53 @@ export const CreateProfile = () => { description="Your name as it will be displayed on the app" /> {/* TODO: When react-web-hook-form is added to edit page we should create a dedicated component with context */} - - - ( - setIsEditingMode(true)} - onBlur={() => { - onBlur(); - setIsEditingMode(false); - }} - onChange={onChange} - placeholder="Tim" - error={error?.message} - fullWidth - /> - )} - /> - ( - setIsEditingMode(true)} - onBlur={() => { - onBlur(); - setIsEditingMode(false); - }} - onChange={onChange} - placeholder="Cook" - error={error?.message} - fullWidth - /> - )} - /> - - + + ( + setIsEditingMode(true)} + onBlur={() => { + onBlur(); + setIsEditingMode(false); + }} + onChange={onChange} + placeholder="Tim" + error={error?.message} + fullWidth + /> + )} + /> + ( + setIsEditingMode(true)} + onBlur={() => { + onBlur(); + setIsEditingMode(false); + }} + onChange={onChange} + placeholder="Cook" + error={error?.message} + fullWidth + /> + )} + /> + From 46a82fc95280e8dcf6b6fe9e751912126dc95155 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Tue, 17 Dec 2024 14:25:46 +0100 Subject: [PATCH 7/7] Fix after merge --- .../twenty-front/src/modules/auth/components/AuthModal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx index 7b33dda3aafa..52354a52088e 100644 --- a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx +++ b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx @@ -12,7 +12,10 @@ type AuthModalProps = { children: React.ReactNode }; export const AuthModal = ({ children }: AuthModalProps) => ( - + {children}