Page widths
Four canonical widths for top-level page wrappers. Pick the one that matches the page's role; never invent a new
width. Drift widths (max-w-sm,
max-w-2xl,
max-w-4xl,
max-w-7xl,
max-w-screen-lg) get migrated to the
nearest canonical when each page is touched — not a big-bang rewrite.
Compact — max-w-md (448px)
Single-input or near-single-input forms: login, password reset, set / change a single setting, set-API-key forms, password forms. Anything that asks the user one focused question.
Form — max-w-lg (512px)
Multi-field forms on their own page: create quote, contact details, edit-profile-style flows. A single column of fields stacked vertically reads cleanly at this width without going wide enough to look stretched.
Reading — max-w-3xl (768px)
View-only or read-heavy pages: view-quote, view-transaction, profile pages. Anything where the user is reading / scanning content rather than filling fields. Wider than a form but bounded so the eye doesn't have to track across a full screen.
App — max-w-screen-2xl (1536px)
List pages, dashboards, anything with a sidebar / table that wants the full app width. The sidebar &
sticky-header layouts in _Layout.cshtml
already use this; new list pages should match.
Rule
Pick from these four. If a page genuinely doesn't fit any of them, the right move is almost always to redesign the page rather than reach for a fifth width — the existing four cover every page archetype the app has today (compact form, multi-field form, read view, full app). New widths are how drift starts.