Implementation Plan: Mobile-Responsive UI

Branch: 006-mobile-responsive-ui | Date: 2026-04-10 | Spec: spec.md
Input: Feature specification from /specs/006-mobile-responsive-ui/spec.md

Note: This template is filled in by the /speckit.plan command. See .specify/templates/plan-template.md for the execution workflow.

Summary

Add CSS media queries to make the frontend usable on small screens (≤ 768px). Three targeted fixes:

Make the navbar sticky and its link bar horizontally scrollable
Prevent horizontal overflow in the book reader view
Align the login card toward the top of the viewport instead of vertically centered

No new dependencies, no backend changes, no new components. Pure CSS additions scoped to existing Vue SFCs.

Technical Context

Language/Version: TypeScript / Node 20 (frontend only)
Primary Dependencies: Vue 3.4, Vue Router 4.3, Pinia 2.1 — no changes
Storage: N/A (frontend-only change)
Testing: Manual browser testing at 375px viewport; npm run lint for TypeScript
Target Platform: Modern mobile browsers (iOS Safari, Chrome Android); desktop unchanged
Project Type: Web application (frontend client only for this feature)
Performance Goals: No regression — changes are CSS-only, zero runtime cost
Constraints: No new dependencies; no changes to desktop layout; no hamburger menu
Scale/Scope: 5 files touched (App.vue, LoginView.vue, BookReaderView.vue, possibly UploadView.vue, BookCard.vue)

Constitution Check

GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.

Principle	Status	Notes
I. KISS	✅ PASS	Pure CSS media queries — simplest viable solution. No new abstractions.
II. Easy to Change	✅ PASS	Changes are scoped CSS within existing SFCs; easy to revert or extend.
III. Web-First Architecture	✅ PASS	Frontend-only change; no API contract impact.
IV. Documentation as Architecture	✅ PASS	No architectural change → README diagram unchanged.
Technology Constraints	✅ PASS	Remains `backend/` + `frontend/`; no new deployable unit.

Verdict: No violations. Complexity Tracking table not required.

Project Structure

Documentation (this feature)

specs/006-mobile-responsive-ui/
├── plan.md              # This file
├── research.md          # Phase 0 output
├── data-model.md        # N/A (no data model changes)
├── quickstart.md        # Phase 1 output
├── contracts/           # N/A (no API contract changes)
└── tasks.md             # Phase 2 output (/speckit.tasks command)

Source Code (repository root)

frontend/
├── src/
│   ├── App.vue                      # Navbar sticky + link bar scroll
│   ├── views/
│   │   ├── LoginView.vue            # Login card top-aligned on mobile
│   │   ├── BookReaderView.vue       # Reader fits screen width on mobile
│   │   └── UploadView.vue           # Book grid min-width reduction (if needed)
│   └── components/
│       └── BookCard.vue             # Card min-width reduction (if needed)

Structure Decision: Option 2 (Web application) per constitution. This feature touches only frontend/; backend/ is untouched.

Complexity Tracking

No violations — table not required for this feature.

3.4 KiB Raw Blame History