Explore-Beyond-Innovations / Explore-Beyond-Innovations/ZeroXBridge_Frontend
Make Contact Us Page Responsive (Mobile → 4K)
- Dominant language
- TypeScript
- Stars
- 32
- Forks
- 70
- PR merge metrics
- No merged PRs in 30d
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](https://www.figma.com/design/tCSwXSGaJS0Sm3L3JnFzYu/ZeroXBridge?node-id=4005-788&t=u5ViJouuqn1mdJND-4)
---
## 📍 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 #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`
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.