Skip to content

Make Contact Us Page Responsive (Mobile → 4K) #231

Description

@Ugo-X

📱 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/support
    • dapp/support/ContactForm.tsx
    • dapp/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`

Activity

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions