test(contributors): add responsive multi-device columns & mobile viewport layout tests

[soumyasekharshee265-ux]

Description

Fixes #6854

Adds a new isolated Vitest suite covering Responsive Multi-device Columns & Mobile Viewport Layouts for app/contributors/ContributorsClient.tsx. The suite simulates a 375px-wide mobile viewport (iPhone SE class) and verifies that the ContributorsClient layout degrades gracefully across mobile devices — the largest segment of profile viewers.

What this PR covers (5 test cases)

1. Stats grid reflow — Verifies grid-cols-1 md:grid-cols-3 collapses into a single vertical column on mobile, with all three stat cards remaining stacked.
2. CTA row stacking — Confirms the flex-col sm:flex-row action row stacks buttons vertically at 375px instead of overflowing horizontally.
3. No horizontal scrollbars — Asserts no primary wrapper emits absolute pixel widths; all constraints use relative tokens (max-w-*, min-h-*, viewport units) plus overflow-hidden on the root.
4. Desktop cursor scales down gracefully — Verifies the custom cursor uses hidden md:block so it does not render or intercept touch events on mobile.
5. Mobile toggle states respond cleanly — Confirms active:scale-95 tap feedback is wired on CTAs (since hover: is unreliable on touch devices) and responsive typography (text-5xl md:text-7xl) scales headings down.

Files touched

• app/contributors/ContributorsClient.responsive-breakpoints.test.tsx (new)

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs) — Testing / Coverage

Visual Preview

No visual/SVG changes — this PR is a test-only addition. Verification is via Vitest output: all 5 tests pass in isolation, and the full suite runs green with no regressions.

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (npm run test -- app/contributors/ContributorsClient.responsive-breakpoints.test.tsx — all 5 tests pass).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• I have run npm run test and all tests pass locally.
• I have run npm run test:coverage and branch coverage is at or above 70%.
• My commits follow the Conventional Commits format (test(contributors): add responsive multi-device columns & mobile viewport layout tests).
• I have updated README.md if I added a new theme or URL parameter. (N/A — no new theme or URL parameter)
• I have starred the repo.
• I have made sure that I have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). (N/A — test-only change, no SVG output modified)
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[Aamod007]

Hello! Thanks for writing these responsive layout tests for the \contributors\ module. Verifying that the columns adapt cleanly across mobile viewports is essential for a good user experience. I noticed the main CI pipeline is currently running. Assuming it passes, this looks fantastic!

Labels assigned:

• \level:beginner: Standard responsive layout assertions.
• \quality:clean: Clean testing structure.
• \ ype:testing: Test coverage addition.

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

✨ No significant bundle size changes detected.

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	3910.49 KB	3910.49 KB	0 B
Total CSS	326.92 KB	326.92 KB	0 B