fix(ui): refine mobile responsiveness for heatmaps and comparison widgets

[ArshVermaGit]

Description

This PR addresses layout issues on smaller viewports where data-heavy components (like the contribution heatmap and friend comparison table) would either overflow the screen or cramp their flex layouts into illegible states. By refining our Tailwind breakpoints, these widgets now render cleanly on mobile devices.

Resolved Issue

Resolves #1556

Key Changes

• Root Containers: Added w-full overflow-hidden and responsive padding (p-4 sm:p-6) to ContributionHeatmap.tsx and FriendComparison.tsx.
• ContributionHeatmap: Updated the header controls and range selectors to elegantly wrap and stack on narrow screens.
• FriendComparison: Updated the bottom action buttons ("View Commit Activity", "Clear Comparison") to stack vertically (flex-col sm:flex-row) so they remain easily tappable on mobile.
• Scroll Areas: Verified that the horizontal scrolling wrappers (overflow-x-auto) function correctly without breaking the parent layout.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• UI/UX Improvement

How Has This Been Tested?

• Tested with browser DevTools in responsive design mode (emulating 320px, 375px, and 414px width devices).
• Verified that no horizontal page-level scrolling occurs when viewing large datasets.
• Ensured form inputs and buttons remain legible and accessible when stacked vertically.

[vercel]

@ArshVermaGit 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

[ArshVermaGit]

Hi @Priyanshu-byte-coder ! Issue #1556 has been resolved. Please review the PR and merge it under GSSoC. Thanks!

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!