[GOOD FIRST ISSUE] Add responsive mobile layout

[Priyanshu-byte-coder]

What needs to be done

The dashboard layout breaks on mobile screens. Make it fully responsive using Tailwind's responsive utilities.

Why this matters

Many developers check their stats on phones. A broken mobile layout is a poor first impression for both users and potential contributors.

Exact files to edit

src/app/dashboard/page.tsx — the main grid layout

Individual components — check each for hardcoded widths or overflow issues:

• src/components/ContributionGraph.tsx
• src/components/PRMetrics.tsx
• src/components/StreakTracker.tsx
• src/components/TopRepos.tsx
• src/components/GoalTracker.tsx
• src/components/DashboardHeader.tsx

Key issues to fix

1. Dashboard grid (dashboard/page.tsx) — already uses lg:grid-cols-3 but verify stacking order on mobile is logical
2. PR stats grid (PRMetrics.tsx line 43) — grid-cols-2 md:grid-cols-4 — verify cards don't overflow on small screens
3. DashboardHeader — user name + buttons may overflow on narrow screens; use flex-wrap or truncate long usernames
4. ContributionGraph time-range tabs — 4 buttons may overflow on very small screens; consider overflow-x-auto

Testing

Resize your browser or use Chrome DevTools → Toggle device toolbar (Ctrl+Shift+M / Cmd+Shift+M).
Test at: 375px (iPhone SE), 390px (iPhone 14), 768px (tablet).

Acceptance criteria

• Dashboard readable and usable at 375px width
• No horizontal scrollbars
• All widgets stack vertically on mobile
• Header doesn't overflow
• npm run lint and npm run type-check pass

Setup

See DEVELOPMENT.md to get running locally.

Mentorship

Comment "I'd like to work on this" to get assigned.

[26Naitik]

Hi, I would like to work on this issue under GSSoC 2026. Please assign it to me.