From 4aabe9e224aa57805fe71e57eaa684ea83ddd33a Mon Sep 17 00:00:00 2001
From: khuddite <62555977+khuddite@users.noreply.github.com>
Date: Tue, 17 Dec 2024 08:51:27 -0500
Subject: [PATCH] Fix pricing modal being cut off and unscrollabel on low
 resolution screens or when zoomed in (#8848)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/modules/auth/components/AuthModal.tsx |  8 ++++-
 .../ui/layout/modal/components/Modal.tsx      |  4 +--
 .../layout/page/components/DefaultLayout.tsx  | 30 +++++++++----------
 .../scroll/contexts/ScrollWrapperContexts.tsx |  7 ++++-
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/components/AuthModal.tsx b/packages/twenty-front/src/modules/auth/components/AuthModal.tsx
index 0bef31d15df..52354a52088 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,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>
 );
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 1941c1d7519..c08f7f06eaa 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: 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)};
 `;
 
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 f739decb34b..18bd1928cbc 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
@@ -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>
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 1d83d1ddd94..cf8da625820 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<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');
   }