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 <felix@twenty.com>

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>
 );