Mobile-First Grid Layouts: What Changed in v0.1.275

Control: MOB-04 | Category: Layout

The problem

Three grids across the product lacked explicit mobile-first column declarations:

Landing page features section — grid gap-8 md:grid-cols-3
Pricing page — grid gap-8 md:grid-cols-3
AI assessment stats bar — grid-cols-3 divide-x divide-border border-b border-border

The first two cases relied on Tailwind's implicit single-column default (no grid-cols-* = one column), which works but hides intent and can be fragile under CSS resets or future refactors.

The third case was a functional bug: with grid-cols-3 and no responsive override, the stats bar rendered three columns of roughly 80 px on a 375 px phone. The content — numerical scores and labels — was either clipped or forced the user to scroll horizontally to read the assessment results.

The fix

AI assessment stats bar

The stats bar in src/components/ai-assessment-panel.tsx now stacks vertically on small screens and expands to three columns at the sm breakpoint.

- class="grid-cols-3 divide-x divide-border border-b border-border"
+ class="grid grid-cols-1 sm:grid-cols-3 divide-y sm:divide-x divide-border border-b border-border"

Mobile (< 640 px): stats stack top-to-bottom, separated by a horizontal rule (divide-y).

Tablet / Desktop (≥ 640 px): stats sit side-by-side in three columns, separated by vertical rules (divide-x), matching the original design.

Landing page features & pricing grids

- class="grid gap-8 md:grid-cols-3"
+ class="grid grid-cols-1 md:grid-cols-3 gap-8"

Adding grid-cols-1 makes the single-column mobile layout explicit. Behaviour on tablet and desktop is unchanged.

Responsive breakpoints reference

Breakpoint	Prefix	Min-width
Mobile (default)	(none)	0 px
Small	`sm:`	640 px
Medium	`md:`	768 px

Best practice going forward

All grid layouts should declare an explicit grid-cols-* at every breakpoint they target. Relying on Tailwind's implicit single-column default is discouraged because:

Intent is invisible to reviewers.
A future utility reset or third-party component stylesheet could override the default.
Audit tools (Stylelint, custom ESLint rules) cannot flag missing mobile declarations on implicit defaults.

Recommended pattern:

<!-- ✅ Explicit mobile-first grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">

<!-- ❌ Implicit mobile base — avoid -->
<div class="grid gap-8 md:grid-cols-3">