Fix mobile layout breakage

My page breaks on mobile. Please fix it.

Problem: {{e.g. bottom button hidden behind the safe area / horizontal scrollbar / text all crammed}}
Reproduces at: {{device or width, e.g. iPhone SE 375px}}

Relevant code:
```
{{structure + styles}}
```

Requirements:
1. First explain why it breaks (fixed width? missing breakpoint? safe area?).
2. Give the full corrected code.
3. Guarantee: no horizontal scroll, key buttons not covered, text at least {{e.g. 12px}}, tap targets at least 44px.
4. Say what you changed at which breakpoints.

Constraints:
- Do not break desktop to fix mobile. Both must work.
- Prefer a responsive fix over maintaining two codebases.
- Do not paper over it with overflow: hidden.

Replace the {{}} parts with your own content

Why it works

1. Cause before code prevents brute-force fixes like global zoom that hide the real problem
2. Numeric acceptance criteria (no horizontal scroll, 44px targets) make the fix verifiable rather than "looks fine"
3. Banning overflow: hidden blocks the most common fake fix - the bug is still there, just invisible
4. Requiring desktop to still work avoids trading one broken viewport for another

What it looks like

For a fixed bottom button covered by the iPhone home indicator, AI adds env(safe-area-inset-bottom) rather than blindly padding.

Where it bites

• !Saying "broken on mobile" with no width means AI cannot target the fix
• !Using overflow: hidden or zoom to force it, which breaks again on the next device

Browse categories