Form inputs are full-width or appropriately sized on mobile

A form with width: 400px inputs renders fine on desktop but overflows phones below 420px wide, forcing horizontal scroll on every keystroke. Two-column form layouts that don't collapse to one column on mobile cram fields into half the screen width and make typing error-prone. Forms are the primary conversion surface — sign-ups, checkout, contact — and a form that is hard to complete on mobile directly reduces business outcomes.

Apply width: 100% with box-sizing: border-box to all form inputs globally, and wrap multi-column form layouts in a responsive grid that stacks on mobile. Audit forms under src/components/forms/ and checkout flows.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <input class="w-full px-3 py-2 border rounded-md" type="text" />
  <input class="w-full px-3 py-2 border rounded-md" type="text" />
</div>