Make onboarding steps responsive on mobile (#22659)

https://github.com/user-attachments/assets/5840936c-d9b8-412f-bfec-2d5af768660c



The onboarding flow was built for a fixed 440px design with no
responsive handling, so on a phone the steps were cramped: oversized
padding/gaps, a decorative import-preview illustration that clipped, and
side-by-side name fields.

Adds targeted `@media (max-width: 768px)` rules (using the existing
`MOBILE_VIEWPORT`):
- Shared step page: smaller padding and gap on mobile (cascades to every
step).
- `UpgradeFreeTrial`: its own mobile padding (it overrides the base
padding).
- Header: reduced side padding.
- Import preview: hide the floating calendar cards on mobile (their
fixed offsets are tuned for the 440px card).
- Create profile: stack the avatar + name fields vertically on mobile.

Verified each step at 375px via Storybook; desktop is unchanged (media
queries gated to <=768px).

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22659?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpStandardContent.tsx

@@ -22,6 +22,8 @@ const StyledFormContainer = styled.div`
   flex-direction: column;
   margin-bottom: ${themeCssVariables.spacing[6]};
   margin-top: ${themeCssVariables.spacing[6]};
+  min-width: 0;
+  width: 100%;
 `;
 
 type SignInUpStandardContentProps = {

packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx

@@ -4,7 +4,11 @@ import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronLeft, IconCoins, IconInfoCircle } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables, useTheme } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+  useTheme,
+} from 'twenty-ui/theme-constants';
 
 const StyledHeader = styled.div`
   align-items: flex-start;
@@ -13,6 +17,10 @@ const StyledHeader = styled.div`
   justify-content: space-between;
   padding: ${themeCssVariables.spacing[8]} ${themeCssVariables.spacing[8]} 1px;
   width: 100%;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding: ${themeCssVariables.spacing[8]} ${themeCssVariables.spacing[4]} 1px;
+  }
 `;
 
 const StyledSide = styled.div`
@@ -26,6 +34,10 @@ const StyledSide = styled.div`
 const StyledLeftSide = styled(StyledSide)`
   justify-content: flex-end;
   padding-right: ${themeCssVariables.spacing[1]};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    justify-content: flex-start;
+  }
 `;
 
 const StyledCenter = styled.div`
@@ -34,6 +46,10 @@ const StyledCenter = styled.div`
   flex: 0 1 ${ONBOARDING_CONTENT_BLOCK_WIDTH}px;
   justify-content: flex-start;
   min-width: 0;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    flex-basis: auto;
+  }
 `;
 
 const StyledRightSide = styled(StyledSide)`

packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepPage.ts

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledOnboardingStepPage = styled.div`
   align-items: center;
@@ -13,4 +13,9 @@ export const StyledOnboardingStepPage = styled.div`
   overflow-y: auto;
   padding: ${themeCssVariables.spacing[16]} ${themeCssVariables.spacing[8]};
   width: 100%;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    gap: ${themeCssVariables.spacing[8]};
+    padding: ${themeCssVariables.spacing[8]} ${themeCssVariables.spacing[4]};
+  }
 `;

packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingImportPreviewEmails.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/onboarding/constants/ImportContactsPreviewEmails';
 import { styled } from '@linaria/react';
 import { IconStar } from 'twenty-ui/icon';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const EMAIL_ROW_HEIGHT = 32;
 const EMAIL_CHECKBOX_SIZE = 12;
@@ -94,6 +94,10 @@ const StyledEventCard = styled.div<{ color: 'orange' | 'sky' }>`
   padding: ${themeCssVariables.spacing[2]};
   position: absolute;
   width: 160px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: none;
+  }
 `;
 
 const StyledEventTitle = styled.span`

packages/twenty-front/src/pages/onboarding/CreateProfile.tsx

@@ -28,7 +28,7 @@ import { Controller, type SubmitHandler, useForm } from 'react-hook-form';
 import { Key } from 'ts-key-enum';
 import { isDefined } from 'twenty-shared/utils';
 import { MainButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 import { z } from 'zod';
 
 const StyledForm = styled.div`
@@ -45,6 +45,11 @@ const StyledNameRow = styled.div`
   display: flex;
   gap: ${themeCssVariables.spacing[2]};
   width: 100%;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    align-items: stretch;
+    flex-direction: column;
+  }
 `;
 
 const StyledNameField = styled.div`

packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx

@@ -28,7 +28,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { Info, Loader } from 'twenty-ui/feedback';
 import { MainButton } from 'twenty-ui/input';
 import { CAL_LINK, ClickToActionLink } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 import {
   type Billing,
   type BillingPlanKey,
@@ -38,6 +38,10 @@ import {
 const StyledPage = styled(StyledOnboardingStepPage)`
   gap: ${themeCssVariables.spacing[5]};
   padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[8]};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding: ${themeCssVariables.spacing[6]} ${themeCssVariables.spacing[4]};
+  }
 `;
 
 const StyledCards = styled(StyledOnboardingContentBlock)`