Responsiveness & breakpoints (v3, Addendum A 6.2)

How Blue Painter checks for responsive layouts.

In v3, Blue Painter checks your designs for responsiveness and breakpoint coverage to ensure flows work across devices.

Breakpoint variants

For key screens, Blue Painter verifies at least: mobile (≤ 480px), tablet (~768px), and desktop (≥ 1024px). Flows that only exist at one size are flagged.

  • "Login screen only has a 1440px variant; add mobile and tablet versions."
  • "Dashboard grid will likely overflow on mobile; consider stacking cards in a single column below 768px."
  • "Primary CTA is too close to screen edge on mobile variant; increase padding."

Layout patterns

Blue Painter identifies auto-layout vs absolute positioning, consistent stacking (horizontal → vertical on mobile), and flags fixed-width containers or tiny touch targets.

Implementation hints

For React/Next projects, reports suggest Mantine layout components: Grid, Stack, MediaQuery, Container.