# Visual Regression Check

## Description
Before opening any PR, start the app locally and screenshot every
page affected by the current diff at desktop and mobile widths.
Flag any layout issues found.

## Prerequisites
- Docker running (for the database)
- Port 3000 available

## Setup
1. Install dependencies: `npm install`
2. Start services: `docker-compose up -d postgres redis`
3. Run migrations: `npx prisma migrate dev`
4. Seed test data: `npm run db:seed`
5. Start the dev server: `npm run dev`
6. Wait for "Ready on http://localhost:3000" in the terminal

## Visual Checks
1. Read the current git diff to identify which pages are affected
2. For each affected page:
   a. Open the page in the browser at http://localhost:3000/{route}
   b. Screenshot at 1280px width (desktop)
   c. Resize the browser to 375px width (mobile)
   d. Screenshot at mobile width
   e. Check for: overlapping text, elements hidden behind other
      elements, horizontal scroll, buttons or links that are
      unreachable, missing images or icons, console errors
3. If any issue is found, list it with the page URL, viewport
   width, and a description of the problem

## Before Opening the PR
1. Run `npm run lint` and fix any issues
2. Run `npm test` and confirm all tests pass
3. Include all screenshots in the PR description
4. If issues were found, list them at the top of the PR body

## Route-Specific Checks

### Dashboard (`/dashboard`)
- The metric cards should display in a 3-column grid on desktop
- Cards should stack to a single column on mobile
- The chart should be fully visible without horizontal scroll

### Checkout (`/checkout`)
- The "Place Order" button must be visible without scrolling
  on both desktop and mobile
- The order summary sidebar should collapse into an accordion on mobile
- The price breakdown should show subtotal, tax, and total on separate lines

### Settings (`/settings`)
- All form labels should be left-aligned with their inputs
- The "Save" button must be reachable at the bottom of the form
- Tab navigation between sections should update the URL hash