# Responsive Preview Project Context

**Last Updated:** 2026-01-08

## Goal
Adding responsive preview layouts to all component prototypes - showing Mobile (393px), Tablet (768px), and Desktop (1024px) side-by-side using the design system breakpoints.

## Completed
- buttons-prototype
- card-prototype
- chat-panel-prototype
- navigation-prototype
- select-strategy-prototype
- page-editor-prototype
- section-headers-prototype
- backlog-labels-prototype
- job-cards-prototype (renamed from backlog-cards-prototype, re-contextualized to Marketplace Job Cards)
- profile-modal-prototype
- templates-modal-prototype

## Key Files
- `/Users/maria/Projects/Consumer Pinnlo/responsive-preview/index.html` - Preview template
- `/Users/maria/Projects/Consumer Pinnlo/design-system-responsive.md` - Design system specs

## Notes
- job-cards-prototype: Converted from Backlog/Kanban layout to Marketplace Job Cards with responsive grid (1 col mobile, 2 cols tablet, 3 cols desktop). Kept exact visual design (card shell, borders, shadows, ripple effect, typography, tags).
- All components use consistent colored ripple hover effect (orange → pink → blue)
- Mobile layouts use horizontal scrollable nav tabs instead of vertical sidebars
- Sectors section hidden on mobile for modal components