# Quickstart: Mobile-Responsive UI

**Feature**: 006-mobile-responsive-ui

## What this feature does

Adds CSS media queries to 2–3 Vue SFCs so the app is usable on phone screens (≤ 768px):
- Navbar sticks to top; link bar scrolls horizontally
- Book reader stacks vertically (no horizontal overflow)
- Login card appears near the top of the screen

## Files to change

| File | Change |
|------|--------|
| `frontend/src/App.vue` | Add `position: sticky; top: 0; z-index: 100` to `.navbar`. Add `@media (max-width: 768px)` block: make `.navbar-links` horizontally scrollable, reduce `.navbar` padding |
| `frontend/src/views/LoginView.vue` | Add `@media (max-width: 768px)`: change `.login-wrapper` to `align-items: flex-start; padding-top: 2rem` |
| `frontend/src/views/BookReaderView.vue` | Add `@media (max-width: 768px)`: set `.chat-reader-split` to `flex-direction: column`, remove fixed width on `.reader-panel`, set `.reader-panel` to `width: 100%` |

## How to test

1. Open browser DevTools → toggle device toolbar → select "iPhone SE" (375 × 667)
2. Navigate to each page:
   - **Any page**: navbar should be visible and sticky; links should be scrollable horizontally within the bar
   - **Login** (`/`): login card should appear near the top, not vertically centered
   - **Book reader** (`/books/:id`): content should fill the width, no horizontal page scrollbar

## No backend changes. No new dependencies. No new files.