Improved responsiveness on mobile phone

2026-04-10 13:41:26 +02:00
parent 0db31e91ab
commit 0711e40c66
16 changed files with 494 additions and 26 deletions
@@ -0,0 +1,75 @@
+# Implementation Plan: Mobile-Responsive UI
+
+**Branch**: `006-mobile-responsive-ui` | **Date**: 2026-04-10 | **Spec**: [spec.md](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:
+1. Make the navbar sticky and its link bar horizontally scrollable
+2. Prevent horizontal overflow in the book reader view
+3. 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)
+
+```text
+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)
+
+```text
+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.