[Copilot]

Dashboard metric cards rendered single-column on mobile, wasting vertical space and requiring excessive scrolling to see all metrics.

Changes

• components/app/dashboard-metric-cards.tsx — both metric grid rows:
  • sm:grid-cols-2 → grid-cols-2 (2 columns from smallest viewport, not just sm+)
  • gap-4 → gap-3 sm:gap-4 (slightly tighter gutter on mobile for the narrower cards)

- <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+ <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">

lg:grid-cols-4 is unchanged — desktop layout unaffected.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Mobile dashboard</issue_title>
<issue_description>

Let's make these boxes 2 across on mobile, so 50% wide plus appropriate margins</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Mobile dashboard #71

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[Copilot]

Pull request overview

Updates the dashboard metrics layout to better use horizontal space on small screens by rendering metric cards in two columns on mobile, reducing vertical scrolling in the dashboard UI.

Changes:

• Make metric grids render grid-cols-2 at the smallest viewport (instead of starting at sm).
• Reduce mobile gutter spacing with gap-3 while preserving sm:gap-4 for larger screens.