Message list mobile layout

[kentcdodds]

Test Plan

To verify these changes, run npm run dev and perform a manual walkthrough of the recipient list and detail pages on a mobile viewport (e.g., 375x812).

Checklist

• Tests updated
• Docs updated

Screenshots

Mobile recipients flow shows full-width actions, grid tabs, and stacked message cards.

---

 

---

Note

Low Risk
Purely presentational Tailwind class changes to layout/spacing; no data fetching, routing, or business-logic changes.

Overview
Improves mobile responsiveness across recipient pages by tightening spacing/typography and making primary CTAs full-width on small screens.

On recipient detail views, updates the tab navigation to a 2-column grid on mobile with responsive padding/tracking, and adjusts upcoming/past message list layouts (card padding, wrapping header/actions, larger icon buttons, and better text wrapping) for readability and touch targets.

^{Written by Cursor Bugbot for commit 76d297f. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}