Trovo Mobile Display Fix Notes
Generated: 2026-07-08

Scope
- Patched the uploaded Trovo Next.js source package for mobile display/overflow issues.
- Changes are focused on responsive layout, mobile overflow prevention, touch-friendly sheets, dashboard/admin/provider layouts, landing hero, marketplace filters, trip planner forms, photo gallery, and chat widget.

Key fixes
1. Global mobile overflow guard
   - app/globals.css
   - Added html/body width constraints and overflow-x protection.
   - Added border-box/min-width:0 baseline so nested flex/grid children can shrink properly instead of forcing horizontal scroll.

2. Shared button responsiveness
   - components/ui/button.tsx
   - Replaced rigid nowrap/fixed-height buttons with wrapping, text-centered, min-height buttons on small screens.
   - Preserves desktop no-wrap behavior at sm+.

3. Mobile drawer/sheet safety
   - components/ui/sheet.tsx
   - components/landing/site-header-mobile.tsx
   - components/dashboard/mobile-nav.tsx
   - Added max-width constraints so mobile menus cannot exceed the viewport on narrow devices.

4. Landing page mobile corrections
   - components/landing/hero.tsx
   - components/landing/demo-widget.tsx
   - components/landing/site-header.tsx
   - Reduced mobile hero padding/type size, stacked CTAs on mobile, allowed badge/benefit wrapping, constrained logo width, and made demo widget internals shrink/wrap safely.

5. Dashboard/Admin/Provider mobile layout corrections
   - app/dashboard/layout.tsx
   - app/admin/layout.tsx
   - app/provider/layout.tsx
   - components/dashboard/topbar.tsx
   - components/currency-switcher.tsx
   - Added min-width controls, reduced mobile page padding, prevented topbar crowding, and kept right-side action icons stable.

6. Trip planner mobile form/grid corrections
   - app/dashboard/plan/_components/generator-form.tsx
   - app/dashboard/plan/_components/generator-page.tsx
   - app/dashboard/trips/[id]/_components/trip-detail.tsx
   - Fixed fixed-column mobile grid overflow, stacked submit/stop actions on mobile, and used minmax grid tracks for desktop split layouts.

7. Marketplace/tour mobile corrections
   - app/tours/page.tsx
   - app/tours/_components/tour-filters.tsx
   - app/tours/[slug]/page.tsx
   - app/tours/[slug]/_components/photo-gallery.tsx
   - app/destinations/[city]/page.tsx
   - app/explore/[slug]/page.tsx
   - components/affiliates/affiliate-row.tsx
   - Reduced mobile padding/headline size, made filters and action buttons stack/wrap properly, adjusted gallery height on mobile, and removed fixed-height CTA risks.

8. Chat widget mobile correction
   - components/dashboard/chat-widget.tsx
   - Converted fixed 360px chat panel to a viewport-aware mobile panel using inset-x and max-height on small screens, while preserving desktop size at sm+.

Validation note
- The package does not include node_modules and this sandbox does not have the project dependencies installed, so I could not run next build/lint locally.
- Changes are className/CSS-only responsive patches and do not alter database, auth, payment, API, Prisma, or business logic.

Recommended smoke test after install
- Home page at 320px, 375px, 414px widths.
- Mobile menu open/close.
- Hero CTA buttons and AI demo widget.
- /tours filters and listing grid.
- Tour detail gallery and booking/sidebar area.
- Dashboard, Admin, Provider layouts on mobile.
- Trip planner generator form.
- Chat widget open/close on mobile.