asepharyana
ae41f64e46
- Root cause of 'navbar mobile tak bisa pindah halaman': the chatbot FAB (fixed right-4 bottom-5 z-50) overlapped the rightmost mobile bottom-nav items (z-40) and intercepted taps. Raise the FAB above the nav on mobile (bottom above nav, md:bottom-5 on desktop) so it never blocks nav taps. - Mobile bottom nav now mirrors the FULL desktop sidebar (all 7 items: dashboard, messages, voice, media, recordings, moderation, analysis); horizontally scrollable + snap-to-active on narrow screens. - Select dropdown: clamp portal position within viewport + min-width so it never overflows off-screen on mobile triggers near the right edge; larger tap targets on touch. - Input/Textarea: text-base (16px) on touch to prevent iOS auto-zoom on focus, text-sm on >=sm; comfortable mobile min-height for chat input. - Add .hermes/plans/mobile-nav-form-responsive.md spec.
54 lines
3.1 KiB
Markdown
54 lines
3.1 KiB
Markdown
# GMW Frontend — Mobile Nav + Form Controls Responsive Pass
|
|
|
|
## Problem
|
|
Two mobile UX defects reported by user:
|
|
|
|
1. **Mobile navbar can't navigate between pages** (`tidak bisa pindah halaman`).
|
|
- **Root cause A (click-block):** the floating chatbot FAB
|
|
(`chatbot.tsx` line ~125: `fixed right-4 bottom-5 z-50 size-11`) overlaps the
|
|
mobile bottom nav (`MobileNav` is `fixed bottom-0 z-40`). Because the FAB is
|
|
`z-50` and sits at `bottom-5` on the right, it intercepts taps on the
|
|
rightmost bottom-nav items (Voice/Media). Verified in Playwright: click on
|
|
`Media` nav item is blocked by `button[aria-label="Open neural HUD assistant"]`.
|
|
- **Root cause B (missing destinations):** `mobileNavItems` in
|
|
`src/lib/navigation.ts` filters `navItems` to only
|
|
`['/dashboard','/messages','/voice','/media']`, so `/recordings`,
|
|
`/moderation`, `/analysis` are unreachable from the mobile bottom bar.
|
|
- **Chosen design (user directive):** extend the mobile bottom bar to **all 7
|
|
nav items**, horizontally **scrollable/flex-wrap** so they fit on narrow
|
|
screens, following the desktop sidebar's items (same set as `navItems`).
|
|
|
|
2. **Form controls not responsive on mobile** (`perbagus textfield, dropdown,
|
|
lainnya agar responsif di mobile`).
|
|
- `Select` dropdown (`primitives/select.tsx`) is portalled w/ `fixed`
|
|
positioning computed from trigger rect only (top/left/width). On a narrow
|
|
viewport a dropdown anchored near the right edge overflows past the screen's
|
|
right edge and can be clipped/clickable-outside the visible area. Clamp
|
|
horizontally within viewport.
|
|
- `Input`/`Textarea` (`primitives/input.tsx`) use `text-sm` (14px) which on
|
|
iOS triggers auto-zoom on focus (a known mobile annoyance) and can be small
|
|
touch targets. Give inputs a comfortable mobile baseline.
|
|
|
|
## Files touched
|
|
- `src/components/shell/mobile-nav.tsx` — use `navItems` (all 7), make the bar
|
|
scrollable on narrow widths (overflow-x-auto + snap), keep active indicator.
|
|
- `src/components/chatbot/chatbot.tsx` — raise FAB above the mobile bottom nav on
|
|
`md:hidden` (e.g. `bottom-[calc(4.75rem+env(safe-area-inset-bottom))]`),
|
|
keep `bottom-5` on `md+` so it never overlaps the nav.
|
|
- `src/lib/navigation.ts` — drop `mobileNavItems` special-case (or repoint to
|
|
`navItems`); keep `navItems` as the single source.
|
|
- `src/components/primitives/select.tsx` — clamp dropdown `left` so it stays
|
|
within viewport; cap width on narrow screens; keep max-height.
|
|
- `src/components/primitives/input.tsx` — mobile-friendly font size / touch
|
|
height (16px inputs to avoid iOS zoom; keep desktop as-is via responsive
|
|
classes).
|
|
|
|
## Verification
|
|
- `pnpm format`, `pnpm lint` (biome clean), `pnpm build` compiles.
|
|
- Smoke on NON-PROD port (4024) — confirm free first via `ss -ltnp`.
|
|
- Playwright mobile viewport (390px): ALL 7 nav items present in bottom bar;
|
|
tapping each navigates (esp. Media rightmost item NOT blocked by FAB); FAB is
|
|
raised above the nav and no longer intercepts taps.
|
|
- Select dropdown on a 390px viewport stays fully on-screen (no right overflow).
|
|
- Commit (no trailer), push, `gh run watch`, verify all 7 live routes 200.
|