admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix pricing modal being cut off and unscrollabel on low resolution screens or when zoomed in (#8848)

Browse Source 
Fixes: #7999

1. Summary
I am not 100% sure why it's happening, but it seems `justify-content:
center` conflicts with `overflow-y: auto` and that's why the modal
content becomes unscrollable and cut off.

2. Solution
To preserve the styling that centers the content inside the modal even
when the content height is less than the modal, I moved
`justify-content: center` from the content to the modal container. When
the content overflows the modal, it seems `justify-content: center` does
nothing, though.

3. Screen Recording


https://github.com/user-attachments/assets/17d8ddbd-7fe8-46ce-b8d0-82d817ee7025

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
khuddite
2024-12-17 08:51:27 -05:00
committed by GitHub
parent f0de1ab245
commit 4aabe9e224
4 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx
View File

@ -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: auto;
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)};
`;

30
packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
View File

@ -126,24 +126,24 @@ export const DefaultLayout = () => {
) : (
<StyledAppNavigationDrawer />
)}
<StyledMainContainer>
{showAuthModal ? (
<>
<SignInBackgroundMockPage />
<AnimatePresence mode="wait">
<LayoutGroup>
<AuthModal>
<Outlet />
</AuthModal>
</LayoutGroup>
</AnimatePresence>
</>
) : (
{showAuthModal ? (
<>
<SignInBackgroundMockPage />
<AnimatePresence mode="wait">
<LayoutGroup>
<AuthModal>
<Outlet />
</AuthModal>
</LayoutGroup>
</AnimatePresence>
</>
) : (
<StyledMainContainer>
<AppErrorBoundary>
<Outlet />
</AppErrorBoundary>
)}
</StyledMainContainer>
</StyledMainContainer>
)}
</StyledPageContainer>
{isMobile && <MobileNavigationBar />}
</StyledLayout>