Design fixture
Pattern table
Show dense page-pattern or infrastructure rows while keeping mobile overflow intentional and bounded.
Good Example
A table sits inside .table-wrap, uses clear column labels, preserves row meaning, and allows horizontal scroll only inside the wrapper.
| Pattern | Route | Schema | QA | Source |
|---|---|---|---|---|
| Service offer | /fixtures/page-patterns/service-offer-scope/ | Service + BreadcrumbList + FAQPage | npm run qa:fixtures | src/data/agent-reference.ts |
| Schema-backed detail | /fixtures/page-patterns/schema-backed-detail/ | WebPage + visible fact inventory | npm run qa:aeo | public/schemas/page-pattern-fixtures.schema.json |
Bad Example
A wide table forces the entire document to scroll horizontally and clips long paths.
Ambiguous decorative status without enough context, source, or command evidence.
States
- desktop-fit
- mobile-scroll-wrapper
- long-command
- many-columns
- empty-state
Responsive Constraint
Horizontal overflow is allowed only inside the table wrapper, not at the document level.
Accessibility Constraint
Table headers identify columns, and long cells remain readable with wrapping or bounded scroll.
Agent Check
Can an agent inspect every column on mobile without losing page navigation or H1 visibility?
QA Gates
npm run qa:browser