Adrien
3.4 KiB
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.