# 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.