From ad74f75e6a0e3a8ba793fcc87995ff0e5613d117 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Wed, 8 Jul 2026 16:05:26 +0200 Subject: [PATCH] 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). Review in cubic --- .../components/SignInUpStandardContent.tsx | 2 ++ .../onboarding/components/OnboardingHeader.tsx | 18 +++++++++++++++++- .../components/StyledOnboardingStepPage.ts | 7 ++++++- .../OnboardingImportPreviewEmails.tsx | 6 +++++- .../src/pages/onboarding/CreateProfile.tsx | 7 ++++++- .../src/pages/onboarding/UpgradeFreeTrial.tsx | 6 +++++- 6 files changed, 41 insertions(+), 5 deletions(-) diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpStandardContent.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpStandardContent.tsx index f7b6bb9243..d3dab22ff1 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpStandardContent.tsx +++ b/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 = { diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx index ef29eff983..a6ccfd0008 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingHeader.tsx +++ b/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)` diff --git a/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepPage.ts b/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepPage.ts index 32be70d5b8..b028591b28 100644 --- a/packages/twenty-front/src/modules/onboarding/components/StyledOnboardingStepPage.ts +++ b/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]}; + } `; diff --git a/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingImportPreviewEmails.tsx b/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingImportPreviewEmails.tsx index d75ab85afd..7ff1d5b6b2 100644 --- a/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingImportPreviewEmails.tsx +++ b/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` diff --git a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx b/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx index fc0104ccab..6f055f7cb5 100644 --- a/packages/twenty-front/src/pages/onboarding/CreateProfile.tsx +++ b/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` diff --git a/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx b/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx index 7a55e21cbe..ab72cf2a10 100644 --- a/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx +++ b/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)`