travelplanning/FIX_PAGES.md

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:

    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:

{/* ❌ 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.