Improved responsiveness on mobile phone

specs/006-mobile-responsive-ui/quickstart.md

@@ -0,0 +1,28 @@
+# 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.