83 lines
5.3 KiB
Markdown
83 lines
5.3 KiB
Markdown
# To AI Agent: Global Mobile Viewport Optimization Plan for `frontend/src/pages`
|
|
|
|
## 1. Context & Architectural Objective
|
|
We are launching a comprehensive mobile responsive refactoring across all core application pages inside `frontend/src/pages/`. Currently, several layouts suffer from desktop-first design assumptions, leading to sideways horizontal scrolling, squished sidebars, text wrapping collisions, and clipped viewports on mobile browsers.
|
|
|
|
**Objective:** Inspect and refactor all page-level layout components to guarantee an impeccable, fluid mobile UX (screen widths under 640px) while preserving the current widescreen layout using Tailwind CSS responsive breakpoints (`sm:`, `md:`, `lg:`).
|
|
|
|
---
|
|
|
|
## 2. Core Mobile-Responsive Design Rules for Pages
|
|
|
|
When auditing and refactoring page containers, strictly enforce these implementation guardrails:
|
|
|
|
1. **Fluid Heights over Sticky Viewports:** Avoid hardcoding page heights to `h-screen`. On mobile browsers, the address bar dynamically expands and collapses, causing layout jumps. Use **`h-auto`** or the new dynamic viewport utilities **`h-dvh`** / **`min-h-dvh`** instead.
|
|
2. **Horizontal Overflow Elimination:** Ensure the root wrapper of every page enforces `w-full overflow-x-hidden`. Any element causing a horizontal scrollbar must be converted to a flex-wrap, horizontal scroll grid, or dynamic stack.
|
|
3. **Flex/Grid Stacking:** Multi-column dashboard layouts must stack vertically on mobile and separate into side-by-side structures on desktop:
|
|
- Use `flex flex-col md:flex-row`
|
|
- Use `grid grid-cols-1 md:grid-cols-3`
|
|
4. **Touch Target & Spacing Downscaling:** Mobile views require higher breathing margins but smaller typography. Reduce text sizes (`text-base` ➔ `text-xs/sm`) and scale down paddings (`p-6` ➔ `p-3/4`) on mobile screens.
|
|
|
|
---
|
|
|
|
## 3. Targeted Page-by-Page Refactoring Guide
|
|
|
|
### 3.1. `MemberDashboard.tsx` (Trang chính / Danh sách Tour)
|
|
- **The Issue:** The grid grid-cols-2 or grid-cols-3 arrangement squishes Tour Card components on small viewports.
|
|
- **Refactor Spec:** - Change main wrapper grid to `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4`.
|
|
- Force individual Tour Cards to occupy 100% width on mobile, stacking all actions ("Trò chuyện", "Chi tiết hành trình") into standard full-width rows or equal flex pairs (`flex-1`).
|
|
|
|
### 3.2. `ItineraryTimeline.tsx` (Trang quản lý Lộ trình Chi tiết)
|
|
- **The Issue:** The sub-navigation tabs ribbon ("Lộ trình, Chi phí, Ảnh...") gets compressed, causing word overlapping. Timeline lines and node circles clip when left padding is too wide.
|
|
- **Refactor Spec:**
|
|
- Convert the sub-navigation menu container into a smooth horizontally scrollable ribbon on mobile:
|
|
```jsx
|
|
className="flex items-center gap-2 overflow-x-auto whitespace-nowrap scrollbar-none pb-2 md:overflow-x-visible md:whitespace-normal"
|
|
```
|
|
- Reduce the absolute left offset tracking of the timeline vertical axis indicator from `left-[32px]` down to a safe margin fitting tight spaces.
|
|
|
|
### 3.3. `PhotoGallery.tsx` / `GalleryPage.tsx` (Thư viện ảnh Tour)
|
|
- **The Issue:** Widescreen image matrices cause layout bleeding or weird masonry columns.
|
|
- **Refactor Spec:**
|
|
- Force image grid wrappers to adopt `grid-cols-2` or `grid-cols-3` on mobile browsers instead of desktop 4-5 structures.
|
|
- Ensure the modal lightboxes or floating overlays use full-width settings (`w-screen h-screen`) with zero perimeter radius limits.
|
|
|
|
---
|
|
|
|
## 4. Code Refactoring Reference Standard
|
|
|
|
### Layout Component Conversion Pattern:
|
|
Apply this fluid adaptation standard on your root page return templates:
|
|
|
|
```jsx
|
|
{/* ❌ BEFORE: RIGID DESKTOP-FIRST PAGE WRAPPER */}
|
|
<div className="w-screen h-screen bg-slate-950 flex p-6 gap-6">
|
|
<aside className="w-64 bg-slate-900">Sidebar</aside>
|
|
<main className="flex-1 overflow-y-auto">Main Dashboard Content</main>
|
|
</div>
|
|
|
|
{/* ✅ AFTER: MOBILE-FIRST FULLY RESPONSIVE LAYOUT SHEET */}
|
|
<div className="w-full min-h-dvh bg-slate-950 flex flex-col md:flex-row p-3 sm:p-6 gap-4 sm:gap-6 overflow-x-hidden">
|
|
|
|
{/* Sticky Navigation or Drawer Menu on Mobile, Fixed Sidebar on Desktop */}
|
|
<aside className="w-full md:w-64 shrink-0 bg-slate-900 rounded-xl p-4 md:sticky md:top-6 md:h-[calc(100vh-3rem)]">
|
|
Sidebar/Menu Content
|
|
</aside>
|
|
|
|
{/* Main Scrollable Core Content Space */}
|
|
<main className="w-full flex-1 overflow-y-visible md:overflow-y-auto">
|
|
<div className="space-y-4 max-w-7xl mx-auto">
|
|
{/* Grid elements stack on mobile (1 col) and expand on desktop */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{/* Card components populate here */}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
## 5. Automated Verification Checklist for AI Agent
|
|
|
|
[ ] Zero Pixel Width Hardcodes: Scan all code blocks in frontend/src/pages/. Ensure no outer boundaries utilize structural fixed layouts like w-[1200px] or w-[800px] without a breakpoint utility prefix (e.g., lg:w-[1200px]).
|
|
[ ] Viewport Axis Lock: Simulate viewport checks at 360px, 390px, and 412px widths. Verify that horizontal browser layout shifting is fully neutralized (window.scrollX === 0).
|
|
[ ] Dynamic Viewport Heights Verification: Confirm that full-page dashboards replace static h-screen classes with h-auto or dynamic min-h-dvh settings to avoid layout bugs when the mobile address bar shifts. |