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

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.