Better Mobile Forms: Single-Column Stacking on Small Screens

Release: v0.1.162 | Control: MOB-08 | Category: Layout

What Changed

Several forms in the onboarding flow and the Add Tenancy slide-over were rendered as fixed two-column grids on all screen sizes. On a typical phone screen (375px wide), each input field was squeezed to roughly 160px — making them awkward to tap and difficult to read or type in.

This release applies a mobile-first responsive grid pattern across all affected forms, so fields stack into a single full-width column on small screens and expand to two columns on larger ones.

Affected Forms

Onboarding — Add First Tenancy Step

Field Group	Before	After
Email / Phone	grid-cols-2	grid-cols-1 sm:grid-cols-2
Town / Postcode	grid-cols-2	grid-cols-1 sm:grid-cols-2
Start Date / Rent	grid-cols-2	grid-cols-1 sm:grid-cols-2

Add Tenancy Slide-Over — Step 1

Field Group	Before	After
Start Date / End Date	grid-cols-2	grid-cols-1 sm:grid-cols-2

Add Tenancy Slide-Over — Step 2

Field Group	Before	After
Rent Amount / Frequency	grid-cols-2	grid-cols-1 sm:grid-cols-2
Deposit Amount / Scheme	grid-cols-2	grid-cols-1 sm:grid-cols-2

Technical Detail

All grids previously used grid grid-cols-2 gap-2 or grid grid-cols-2 gap-4. These have been replaced with grid grid-cols-1 sm:grid-cols-2 gap-{n} throughout src/app/onboarding/onboarding-client.tsx.

The AddTenancySlideOver component is sized w-full sm:max-w-lg. Because it occupies the full viewport width on mobile, the single-column fallback ensures every input field is comfortably wide and tappable at any phone size.

Breakpoint Behaviour

Viewport Width	Grid Layout
< 640px (mobile)	1 column — fields stack vertically
≥ 640px (sm+)	2 columns — fields sit side-by-side

No changes were made to the visual design, field labels, validation logic, or data submitted by these forms.