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

- [x] T001 [US1] Add `position: sticky; top: 0; z-index: 100` to `.navbar` in `frontend/src/App.vue`
- [x] 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.

- [x] 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.

- [x] 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

- [x] T005 [P] Run `npm run lint` in `frontend/` and fix any lint errors (ESLint not configured — pre-existing, unrelated to this feature)
- [x] 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