feat: improve dashboard responsiveness for mobile and tablet screens (#1822)

[BCA-krishna]

Problem

The DevTrack dashboard is currently optimized for desktop only. Users on mobile and tablet experience:

• Charts and visualizations too wide to read without horizontal scrolling
• UI elements that overlap and crowd on narrow viewports
• Navigation menu that breaks below 768px
• Buttons and inputs too small for comfortable touch interaction
• Horizontal scrolling required in multiple areas of the dashboard

---

Objective

Make the dashboard fully responsive from 320px (mobile) to 1440px+ (desktop) using Tailwind CSS responsive breakpoints with a mobile-first approach.

---

Scope of work

1. Responsive grid layouts

• PRMetrics.tsx — change fixed 3-column grid to grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
• TopRepos.tsx — stack items vertically on mobile
• dashboard/page.tsx — apply responsive padding (p-4 md:p-6 lg:p-8)

2. Navigation & header

• DashboardHeader.tsx — add collapsible nav menu below 768px
• Implement mobile sidebar drawer (visible on mobile, hidden on desktop)
• Ensure accessible and functional at all breakpoints

3. Charts & data visualization

• ContributionGraph.tsx — wrap with ResponsiveContainer for proper sizing
• Apply responsive font sizes (text-sm md:text-base lg:text-lg)
• Hide chart legends on screens narrower than 640px
• Ensure all interactive elements meet 44px minimum touch target size

4. Spacing & padding

• Audit all components for mobile-appropriate padding using responsive Tailwind classes
• Consistent gap between elements across all breakpoints
• Optimize GoalTracker.tsx and StreakTracker.tsx for small-screen readability

5. Testing

• Test at: 320px · 390px · 768px · 1024px · 1440px+
• Validate with Chrome DevTools device mode
• Confirm all touch interactions work correctly

---

Acceptance criteria

• No horizontal scrolling at any supported screen size
• All text is readable — minimum 12px on mobile
• All buttons and inputs have minimum 44px touch target size
• Charts display and remain readable at all sizes
• Navigation is functional on all device types
• Testing screenshots included in the PR

---

Screenshots

Add before/after screenshots here when submitting the fix. Use Chrome DevTools device mode at the viewports listed above.

Before (current broken state on mobile)

After (expected fixed state)

---

Implementation notes

• Start with src/app/dashboard/page.tsx to understand overall layout structure
• Apply Tailwind breakpoint prefixes using mobile-first approach throughout
• Test frequently with Chrome DevTools device simulation during development
• Component files are in src/components/

---

Closes #1822

[vercel]

@BCA-krishna is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus