From c6f03800707d77429a6f8f9b7765a3ae9f268b3e Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Fri, 17 Jul 2026 08:45:11 +0200
Subject: [PATCH] Reuse onboarding container width for workspace selection
 (#22974)

Fix in https://github.com/twentyhq/twenty/pull/22965 was wrong, 440px
wide is the new intended width for both signup forms.
This PR reverts + does the correct fix.

See figma as source of truth
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=1633-94880&p=f&m=dev

## Before
<img width="431" height="450" alt="Screenshot 2026-07-16 at 18 14 26"
src="https://github.com/user-attachments/assets/3f8788e1-3764-4326-867a-973a98e48007"
/>

## After
<img width="1030" height="898" alt="Screenshot 2026-07-17 at 08 24 38"
src="https://github.com/user-attachments/assets/42e03215-f32c-4f61-8f2d-1b8ff966d31c"
/>
<img width="1028" height="900" alt="Screenshot 2026-07-17 at 08 24 25"
src="https://github.com/user-attachments/assets/3a49142a-dc52-4097-96d2-05a4e641f574"
/>
---
 .../components/StyledOnboardingContentContainer.ts   |  4 +++-
 .../components/SignInUpGlobalScopeForm.tsx           | 12 ++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts b/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts
index e77ee25078..3aea62da85 100644
--- a/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts
+++ b/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts
@@ -1,8 +1,10 @@
+import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth';
 import { styled } from '@linaria/react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledOnboardingContentContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[8]};
   margin-top: ${themeCssVariables.spacing[4]};
-  min-width: 240px;
+  max-width: 100%;
+  width: ${ONBOARDING_CONTENT_BLOCK_WIDTH}px;
 `;
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
index f49acf7e36..062cfdf9ed 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
@@ -9,7 +9,6 @@ import { ClickToActionLink, UndecoratedLink } from 'twenty-ui/navigation';
 
 import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer';
 import { OnboardingStepAnimatedItem } from '@/onboarding/components/OnboardingStepAnimatedItem';
-import { ONBOARDING_CONTENT_BLOCK_WIDTH } from '@/onboarding/constants/OnboardingContentBlockWidth';
 import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials';
 import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle';
 import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft';
@@ -38,13 +37,6 @@ import {
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { getAbsoluteImageUrl } from '~/utils/image/getAbsoluteImageUrl';
 
-const StyledWorkspaceSelectionContentContainer = styled(
-  StyledOnboardingContentContainer,
-)`
-  max-width: 100%;
-  width: ${ONBOARDING_CONTENT_BLOCK_WIDTH}px;
-`;
-
 const StyledWorkspaceContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.light};
@@ -173,7 +165,7 @@ export const SignInUpGlobalScopeForm = () => {
   return (
     <>
       {signInUpStep === SignInUpStep.WorkspaceSelection && (
-        <StyledWorkspaceSelectionContentContainer>
+        <StyledOnboardingContentContainer>
           <StyledWorkspaceContainer>
             {availableWorkspacesList.map((availableWorkspace, index) => (
               <OnboardingStepAnimatedItem
@@ -237,7 +229,7 @@ export const SignInUpGlobalScopeForm = () => {
               </OnboardingStepAnimatedItem>
             )}
           </StyledWorkspaceContainer>
-        </StyledWorkspaceSelectionContentContainer>
+        </StyledOnboardingContentContainer>
       )}
       {signInUpStep !== SignInUpStep.WorkspaceSelection && (
         <StyledOnboardingContentContainer>