fix(mobile): prevent widget overflow and overlap on screens < 375px (#975)

[Meera2906]

Summary

Fixes #975 — dashboard widgets overflowing and overlapping on viewports narrower than 375px (e.g. iPhone SE 1st gen at 320px).

Root Causes Fixed

File	Problem	Fix
DashboardHeader.tsx	pr-12 offset + absolute hamburger caused left-section content to be pushed off-screen	Removed padding reservation; hid redundant hamburger (action bar already scrolls via overflow-x-auto)
StreakTracker.tsx	text-2xl stat values overflowed 2-column grid at 320px	Reduced to text-lg + break-all; tightened card padding
PRMetrics.tsx	text-2xl metric values clipped in narrow stat cards	Reduced to text-xl
ContributionHeatmap.tsx	sm:flex-row header caused title+controls to fight for space	Switched to always-vertical stack with wrapping controls
AccountToggle.tsx	text-sm px-3 py-2 buttons too wide for 320px wrap layout	Reduced to text-xs px-2.5 py-1.5 + max-w + truncate

Testing

• Verified at 320px, 375px, and 390px in Chrome DevTools
• No visual regressions at sm: (640px) and above
• All existing Playwright e2e tests continue to pass (npm run test:e2e)

Checklist

• No new dependencies added
• TypeScript types unchanged
• CI: npm run lint && npm run type-check passes

[github-actions]

GSSoC Label Checklist 🏷️

@Umbrella-io — 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