# Mobile checklist

Mobile is a contract, not a late breakpoint.

## Layout

- Start with a single column and add width only above the mobile baseline.
- Keep page padding between `16px` and `20px` at narrow widths.
- Set `min-width: 0` on flex/grid children containing prose, JSON, filenames, or URLs.
- Prefer `width: 100%` with a `max-width`; never rely on a fixed panel width.
- Stack tool, approval, question, and composer footers below `600px`.

## Long content

Use the following rules on agent-generated content:

```css
.agent-surface,
.agent-surface pre,
.agent-surface code {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.agent-surface pre {
  white-space: pre-wrap;
}
```

Do not solve overflow by hiding the document. Preserve the action, status, and exact payload; make the content wrap or scroll locally.

## Verification

Test each recipe at:

- `390×844`, portrait phone baseline;
- `768×1024`, narrow tablet;
- `1440×1000`, desktop reference.

At every width, verify:

- no document-level horizontal overflow;
- all primary controls remain reachable with Tab;
- approval and question controls remain visible without hover;
- light/dark tokens retain readable contrast;
- reduced motion removes decorative animation, not state feedback.