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

Reuse onboarding container width for workspace selection (#22974)

Browse Source 
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"
/>
This commit is contained in:
Weiko
2026-07-17 08:45:11 +02:00
committed by GitHub
parent 52b7aebddf
commit c6f0380070
2 changed files with 5 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts
+3 -1
View File
@@ -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;
`;
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+2 -10
View File
@@ -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>