test: verify StatsCards responsive wrapping across mobile, tablet, de…

[Valreb001]

Closes #138

Problem

StatsCards used a hard-coded grid-cols-4 with no responsive variants, meaning all 4 cards always
tried to render in a single row — overflowing or squashing on mobile and tablet. There were also
no tests verifying layout at different screen widths.

Changes made (3 files)

components/dashboard/StatsCards.tsx

• Fixed the grid from grid-cols-4 to grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 so cards stack on
  mobile (1 col), pair on tablet (2 cols), and sit in a single row on desktop (4 cols).
• Added data-testid="stats-card" to each card so tests can target them reliably.

components/ui/Card.tsx

• Changed the props type from a narrow custom interface to HTMLAttributes and spread ...props, so data-testid and any other HTML attributes pass through to the DOM.

tests/stats-cards-responsive.test.mjs (new)

• Three Playwright tests, one per breakpoint (mobile 375px → 1 col, tablet 768px → 2 cols,
  desktop 1280px → 4 cols).
• Each test sets the viewport, navigates to /dashboard, queries all [data-testid="stats-card"]
  elements, and counts how many share the same top offset (i.e. are on the same row) to assert the
  expected column count.

[vercel]

@Valreb001 is attempting to deploy a commit to the dreamgenex's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Valreb001 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits