Make Contact Us Page Responsive (Mobile → 4K) #231
Description
📱 Issue: Make Contact Us Page Responsive (Mobile → 4K)
❗️Important
🔴 This work must be implemented against the app-main branch.
Please fork from app-main before starting and submit your PR back to app-main — not main.
FIGMA LINK
📍 Scope & Location
- Update only files inside:
/dapp/supportdapp/support/ContactForm.tsxdapp/support/contact/page.tsx
Note: Do not add or rebuild Navbar, OnlyDust banner, or Footer here. This issue focuses solely on responsiveness of what’s already built.
📋 Task
Make the Contact Us page fully responsive across common breakpoints:
- Target widths to validate: 320, 375, 414, 640, 768, 1024, 1280, 1440, 1920, 2560, 3840.
- Layout behavior:
- Mobile: Single-column, generous spacing, readable line-length, stacked fields.
- Tablet: Comfortable container width; grid spacing scales properly.
- Desktop: Matches PC baseline from Issue FE: Build the Navbar component #1.
- 4K/Ultra-wide: Constrain content with a centered max-width; avoid overly stretched fields.
- Respect Windows laptop sizes (common widths 1366, 1536, 1600) where inaccuracies were reported.
Accessibility & UX:
- Inputs remain tappable/usable on small screens.
✅ Deliverables
- Responsive styles applied to the existing Contact form/page.
- Screenshots at three sizes: mobile, laptop/desktop, 4K.
- 1 short video (≤30s) showing a live resize from mobile → desktop → 4K.
✅ Acceptance Criteria
- No horizontal overflow at any tested width.
- Typography, spacing, and controls scale appropriately across breakpoints.
- Accessibility preserved (focus, labels, readable contrast).
General Notes
- Keep implementation simple and consistent with the existing design system.
- All work remains within
/dapp/support. - Include the screenshots + video in the PR.
rity`