---
{
  "n": 56,
  "title": "Add phone breakpoint and viewport foundations",
  "abstract": "Set up the viewport meta tag and a shared phone-width breakpoint other cards build on",
  "refs": [
    "message:11539"
  ],
  "seen": [
    "agent",
    "system",
    "user"
  ],
  "data": {
    "source": "user",
    "stage": "To do",
    "board": 13,
    "draft": true,
    "covers": [
      "1",
      "4"
    ],
    "agent": "board-filler",
    "dispatcher": "c35e7375-7ce3-4bc3-b1ae-7cdf73bd1488",
    "environment": "main",
    "dependencies": {}
  },
  "created": 1790374113.4013472,
  "updated": 1791617911.700747,
  "deleted": 1791617911.696286,
  "completed": 0.0,
  "outcome": "",
  "type": "ticket"
}
---
**What:** add a viewport meta tag and a single shared CSS breakpoint/variable for phone widths.

**Why:** every other phone-layout card needs one consistent point where 'phone' starts, not scattered ad-hoc widths.

**Touches:** web/index.html viewport tag, shared CSS variables/breakpoint file.

**Done when:** the app renders at a real phone width without the browser auto-zooming out, and a single breakpoint value is available for the board, ticket card, top bar and nav cards to use.

**Risk:** picking a breakpoint too narrow or wide misses real phones; check against common phone widths.