fix(dashboard): Prevent horizontal overflow and improve layout on small screens

[nishtha-agarwal-211]

Description

Fixes #8302

Changes Summary

• Header Actions Bar (DashboardClient.tsx): Replaced grid-cols-2 base grid styling with grid-cols-1 sm:grid-cols-2 md:grid-cols-4 on screens < 640px (specifically viewports < 375px like Galaxy Fold or iPhone SE) to stack action buttons vertically without overflowing the viewport.
• Root Layout (DashboardClient.tsx): Enforced w-full max-w-full overflow-x-hidden on the #dashboard-root element to prevent horizontal document scrolling.
• Stats Card Layout & Text Truncation (StatsCard.tsx):
  • Dynamically scaled card padding to p-4 sm:p-6.
  • Added min-w-0 flex-1 and break-words text wrapping to metric text elements to prevent truncation clipping on small screens.
  • Added shrink-0 to the icon wrapper.

Pillar

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

Visual Preview

Verified responsive column stacking and document width containment on 360px viewport width in Chrome DevTools.

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (localhost:3000/api/streak?user=YOUR_USERNAME).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a 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).
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[vercel]

@nishtha-agarwal-211 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[retenta-bot]

This pull request effectively resolves the issue of horizontal overflow and layout shifts on smaller screens, as outlined in issue #8302. The changes made to the grid styling and layout will enhance the user experience on devices with limited screen width. Additionally, similar past decisions have focused on improving responsive layouts and ensuring that components render correctly across various devices. This aligns well with our ongoing efforts to maintain a high-quality user interface. Thank you for your contributions, and I look forward to your updates!

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/chunks/app/(root)/dashboard/org/[orgname]/page-[hash].js	1.24 KB	1.19 KB	+0.05 KB (+4.12%)	🔴 Regression

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	4052.64 KB	4052.50 KB	+0.14 KB (+0.00%)
Total CSS	338.94 KB	338.94 KB	0 B

[Aamod007]

Fixing horizontal overflow on small screens with CSS tweaks in DashboardClient and StatsCard. CI failing, please fix.

Labels: level:beginner (2 files, 9+9), quality:clean, type:bug, mentor:Aamod007

[Aamod007]

Re-reviewing after noting the only CI failure is Vercel authorization (not code-related). All other checks (Format · Lint · Typecheck · Test, Production Build, CodeQL) pass. Approving — the Vercel deploy auth is a repo-level config issue, not a code problem.