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

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 <[email protected]>

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,11 @@ type AuthModalProps = { children: React.ReactNode };
 
 export const AuthModal = ({ children }: AuthModalProps) => (
   <Modal padding={'none'} modalVariant="primary">
-    <StyledContent>{children}</StyledContent>
+    <ScrollWrapper
+      contextProviderName="modalContent"
+      componentInstanceId="scroll-wrapper-modal-content"
+    >
+      <StyledContent>{children}</StyledContent>
+    </ScrollWrapper>
   </Modal>
 );

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

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

@@ -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>

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<ScrollWrapperContextValue>({
@@ -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');
   }