No fixed-width containers that exceed mobile viewport

A wrapper element with width: 1200px and no max-width forces the document to be wider than any phone viewport. The browser shows a horizontal scrollbar, content spills off-screen, and users must swipe sideways to read anything. Buttons and forms placed on the right edge become unreachable without scrolling. This is one of the most common causes of a failed mobile render — and it persists even when the viewport meta tag is correctly configured.

Replace fixed widths with max-width + width: 100%, or use CSS min() to combine both constraints. In Tailwind, pair max-w-7xl or similar with w-full and mx-auto on the wrapper.

.wrapper { max-width: 1200px; width: 100%; margin: 0 auto; }

Audit every layout file in app/ and components/layout/ for hardcoded pixel widths above 640px.