fix: improve dashboard responsiveness on very small screens

[S-MOHAMMED-ISMAIL]

Summary

Fixed dashboard responsiveness issues on very small screens (320px devices).

Closes #975

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Fixed dashboard header overflow on very small screens
• Added responsive wrapping for dashboard controls
• Prevented horizontal scrolling on 320px width
• Improved alignment of action buttons and user controls
• Added mobile-safe layout behavior using flex-wrap and responsive spacing
• Ensured widgets stay inside container boundaries

How to Test

Steps for the reviewer to verify this works:

1. Run the app locally using npm run dev

2. Open Chrome DevTools → Responsive Mode

3. Set viewport width to 320px

4. Navigate to the dashboard page

5. Verify:

   • no horizontal overflow
   • no clipped text
   • controls wrap correctly
   • dashboard widgets stay aligned inside containers

Screenshots (if UI change)

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@S-MOHAMMED-ISMAIL 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.

[S-MOHAMMED-ISMAIL]

CI failure appears unrelated to this PR.

The failing Playwright smoke tests are repo-wide and affect multiple existing E2E specs:

• auth-bypass.spec.js
• dashboard-widgets.spec.js
• landing.spec.js
• public-profile.spec.js

This PR only modifies dashboard responsiveness for very small screens (320px layouts). Local lint checks pass successfully.

[Priyanshu-byte-coder]

CI is failing on this PR. Please fix the failing checks before this can be merged.

[S-MOHAMMED-ISMAIL]

All requested fixes have been completed and all CI checks are passing.