ai-teacher/specs/006-mobile-responsive-ui/tasks.md

Tasks: Mobile-Responsive UI

Input: Design documents from /specs/006-mobile-responsive-ui/ Prerequisites: plan.md ✅, spec.md ✅, research.md ✅, quickstart.md ✅

No foundational phase needed — all changes are isolated CSS additions within existing SFCs.

---

Phase 1: User Story 1 - Sticky Navbar with Scrollable Links (Priority: P1) 🎯 MVP

Goal: Navbar stays fixed at top; all links are reachable by horizontal scroll on mobile.

Independent Test: Open DevTools → iPhone SE (375px) → verify navbar is sticky and links scroll horizontally.

• T001 [US1] Add position: sticky; top: 0; z-index: 100 to .navbar in frontend/src/App.vue
• T002 [US1] Add @media (max-width: 768px) block to frontend/src/App.vue: reduce navbar padding, make .navbar-links horizontally scrollable (overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; flex-shrink: 0)

Checkpoint: Navbar is sticky and links are horizontally scrollable on 375px viewport.

---

Phase 2: User Story 2 - Book Reader Fits Screen Width (Priority: P2)

Goal: Book reader content fills phone screen width without page-level horizontal overflow.

Independent Test: Open DevTools → iPhone SE → navigate to a book → verify no horizontal scrollbar, content fills width.

• T003 [US2] Add @media (max-width: 768px) block to frontend/src/views/BookReaderView.vue: set .chat-reader-split to flex-direction: column, set .reader-panel to width: 100%; min-width: unset; max-width: 100%

Checkpoint: BookReaderView stacks vertically with no horizontal overflow on 375px viewport.

---

Phase 3: User Story 3 - Login Form Near Top of Screen (Priority: P3)

Goal: Login card appears near top of viewport on mobile instead of vertically centered.

Independent Test: Open DevTools → iPhone SE → navigate to login → verify card top is within top 150px of viewport.

• T004 [US3] Add @media (max-width: 768px) block to frontend/src/views/LoginView.vue: change .login-wrapper to align-items: flex-start; padding-top: 2rem

Checkpoint: Login card appears near top of screen on 375px viewport.

---

Phase 4: Polish

• T005 [P] Run npm run lint in frontend/ and fix any lint errors (ESLint not configured — pre-existing, unrelated to this feature)
• T006 [P] Verify .main-content padding is reduced on mobile in frontend/src/App.vue (covered in T002 media query block)

---

Dependencies & Execution Order

• T001 → T002 (same file, sequential)
• T003, T004 independent of each other and of T001/T002 (different files)
• T005, T006 after all implementation tasks