Skip to content

fix: resolve merge conflicts and fix mobile responsive layout#1744

Closed
IshitaSingh0822 wants to merge 7 commits into
Priyanshu-byte-coder:mainfrom
IshitaSingh0822:fix/mobile-responsive-layout
Closed

fix: resolve merge conflicts and fix mobile responsive layout#1744
IshitaSingh0822 wants to merge 7 commits into
Priyanshu-byte-coder:mainfrom
IshitaSingh0822:fix/mobile-responsive-layout

Conversation

@IshitaSingh0822
Copy link
Copy Markdown
Contributor

Summary

Fixed mobile responsive layout across the dashboard — resolved unresolved git merge conflicts in page.tsx, DashboardHeader.tsx, and globals.css, and addressed all mobile breakpoint issues causing horizontal overflow, broken grids, and non-tappable buttons.
Closes #1302


Type of Change

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

Changes Made

  • Resolved unresolved git merge conflicts in src/app/dashboard/page.tsx, src/components/DashboardHeader.tsx, and src/app/globals.css
  • Added overflow-x: hidden and max-width: 100vw to html/body to eliminate horizontal scroll on all pages
  • Dashboard quick-action buttons now stack vertically on mobile with proper min-h-[44px] touch targets
  • Fixed DashboardHeader right section overflowing on narrow screens
  • Fixed Footer grid: 2-column on mobile, 4-column only at lg breakpoint
  • Added min-height: 44px to .primary-button and .secondary-button globally

How to Test

  1. Open the deployed branch in Chrome DevTools
  2. Toggle device toolbar and select iPhone SE (375px)
  3. Verify no horizontal scroll exists on the dashboard
  4. Confirm action buttons stack vertically and are tappable
  5. Scroll to footer — verify it renders in 2 columns on mobile
  6. Repeat on Pixel 5 (393px) and iPad (768px)

Screenshots (if UI change)

N/A — use Chrome DevTools mobile emulator to verify


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

Accessibility Checklist

  • Proper keyboard navigation tested
  • Responsive UI verified
  • Accessibility labels added where needed

Additional Notes

The merge conflicts in the codebase were the root cause of compile failures on mobile. All layout fixes use Tailwind's sm:, md:, and lg: responsive prefixes — no custom CSS breakpoints added.

- Custom branded not-found.tsx (404) with Go to Dashboard + Go Home buttons
- Updated error.tsx (500) with error digest, Try Again, and nav buttons
- New ErrorBoundary component with section-level error cards
- Wrap all dashboard sections in ErrorBoundary
- Fix unresolved merge conflicts in page.tsx, DashboardHeader.tsx, globals.css
- Add overflow-x: hidden to html/body to prevent horizontal scroll
- Stack dashboard action buttons vertically on mobile with min-h-[44px] touch targets
- Fix DashboardHeader right section overflow on narrow screens
- Fix Footer grid: 2-col on mobile, 4-col only at lg breakpoint
- Add min-height: 44px to .primary-button and .secondary-button
- Tighten section scroll-mt and spacing for mobile navbar height

Closes #<your-issue-number>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 31, 2026

@IshitaSingh0822 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 May 31, 2026
@github-actions
Copy link
Copy Markdown

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

@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

Closing — this PR contains unresolved git conflict markers (<<<<<<< HEAD, =======, >>>>>>>) literally baked into the diff. Please resolve the conflicts locally and force-push before reopening.

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.

[Bug]: App Crashes on Mobile Viewport — Dashboard Layout Completely Broken on Small Screens

2 participants