Files
twenty/packages
Raphaël Bosi ad74f75e6a 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. -->
2026-07-08 16:05:26 +02:00
..