Skip to content

fix: improve dashboard responsiveness for mobile and tablet screens#2202

Open
Kokila-chandrakar wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
Kokila-chandrakar:fix/dashboard-responsiveness-v2
Open

fix: improve dashboard responsiveness for mobile and tablet screens#2202
Kokila-chandrakar wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
Kokila-chandrakar:fix/dashboard-responsiveness-v2

Conversation

@Kokila-chandrakar
Copy link
Copy Markdown
Contributor

Closes #1404

Problem

Dashboard components, cards, and layout sections were not fully optimized for smaller screen sizes. Issues included cramped spacing, overflow problems, and fixed layouts that didn't adapt to mobile viewports.

Changes

src/app/dashboard/page.tsx

  • Outer container: Reduced padding on mobile (px-3 py-5) with progressive scaling (sm:px-6 sm:py-8 lg:px-8)
  • Quick actions: Buttons stack vertically on mobile, row layout on sm+
  • Section headings: Scaled from text-xl (mobile) to text-2xl (desktop)
  • Section accent bars: Scaled from h-7 (mobile) to h-8 (desktop)
  • Section margins: Responsive spacing (mt-10 sm:mt-14)
  • Scroll margins: Adjusted for mobile (scroll-mt-20 sm:scroll-mt-28)
  • Contribution graphs: Added horizontal scroll on small screens (overflow-x-auto -mx-3 px-3 sm:mx-0 sm:px-0)

src/components/DashboardHeader.tsx

  • Header padding: Progressive scaling (p-4 sm:p-5 md:p-6) for better mobile fit

Notes

  • No features were removed or modified — all changes are CSS/layout only
  • CustomizableDashboard, lastSynced localStorage persistence, and night-owl/early-bird badge detection are fully intact
  • All existing functionality remains unchanged

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 8, 2026

@Kokila-chandrakar 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 github-actions Bot added gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) labels Jun 8, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 8, 2026

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve mobile responsiveness and layout consistency across dashboard components

1 participant