Final Breakpoint System — Research-Backed
Based on 5 research agents: M3 spec, device viewport data, SaaS dashboard patterns, container queries, and tablet/mobile screen sizes (2025-2026).
Content Area Breakpoints (viewport minus 56px sidebar)
| Content Width | Viewport | M3 Class | Max Cols | Devices |
|---|---|---|---|---|
| 0-599px | 0-655px | Compact | 1 | Phones, Galaxy Tab A (600px), foldables |
| 600-767px | 656-823px | Medium | 2 | iPad Mini (744px), iPad portrait (810-834px) |
| 768-1023px | 824-1079px | Expanded | 3 | iPad landscape (1024-1194px), small desktop |
| 1024-1439px | 1080-1495px | Large | 4 | Desktop (1280-1440px), iPad Pro landscape |
| 1440px+ | 1496px+ | Extra-Large | 5 | Large desktop (1920px+), ultrawide |
Row Column Collapse Rules
5-col row: 5 at xl(1440+) → 3 at lg(1024) → 2 at md(768) → 1 at sm(600)
4-col row: 4 at lg(1024+) → 2 at md(768) → 1 at sm(600)
3-col row: 3 at md(768+) → 2 at sm(600) → 1 at xs(0)
2-col row: 2 at sm(600+) → 1 at xs(0)
1-col row: 1 always
Min column width: 300px (forms: 320px). All thresholds based on content area width (container query model).
Complete Architecture Summary
DB Schema
app_page_layout (registered layouts)
layout_id, label, description, status
app_page_section (new fields)
+ row: int (1-based)
+ column: int (1-based)
+ columns_in_row: int (1-5)
app_page (new field)
+ layout: record<app_page_layout>
Code Changes
PageBuilder.build()
Groups sections by row number
Creates FlexContainer.row() per multi-col row
Applies responsive column collapse
DataLoader
+ loadLayouts() → app_page_layout
+ DataLoader.layouts object
JadeFormField / JadeFormSection
10 visual improvements
Subscriptions Page — Final Layout
Remove: subscription-status (fake), subscription-usage (fake). Keep 4 sections in 2 rows × 2 columns.
💳
Payment Methods
No payment methods on file
+ Add Payment Method
📍
Billing Address
Edit
Address Line 1 *
Not set
City *
Not set
✉️
Billing Email
Edit
Email Address *
Not set
📄
Invoice History
No invoices yet