docs(11-04): complete forms baseline and mobile-safe modals plan summary

2026-06-16 21:35:52 +02:00
parent df53cef3b7
commit 087eec1047
1 changed files with 148 additions and 0 deletions
@@ -0,0 +1,148 @@
+---
+phase: 11-visual-design-responsive-layout-cleanup
+plan: 4
+subsystem: frontend/modals
+tags: [mobile, modals, forms, VISUAL-02, RESP-04]
+dependency_graph:
+  requires: [11-03]
+  provides: [mobile-safe-modals, form-baseline-coverage]
+  affects:
+    - frontend/src/components/sharing/ShareModal.vue
+    - frontend/src/components/cloud/CloudCredentialModal.vue
+    - frontend/src/components/folders/FolderDeleteModal.vue
+    - frontend/src/components/documents/DocumentPreviewModal.vue
+    - frontend/src/views/DocumentView.vue
+tech_stack:
+  added: []
+  patterns:
+    - "max-h-[90vh] overflow-y-auto on modal panels — scroll-safe mobile pattern"
+    - "px-4 sm:px-6 responsive horizontal padding on full-screen preview header"
+    - "data-test attributes on all modal panels for testability"
+    - "focus:outline-none focus:ring-2 focus:ring-indigo-500 — consistent form baseline pattern throughout codebase"
+key_files:
+  created:
+    - frontend/src/components/sharing/__tests__/ShareModal.mobile.test.js
+    - frontend/src/components/cloud/__tests__/CloudCredentialModal.mobile.test.js
+    - frontend/src/components/folders/__tests__/FolderDeleteModal.mobile.test.js
+    - frontend/src/components/documents/__tests__/DocumentPreviewModal.mobile.test.js
+  modified:
+    - frontend/src/components/sharing/ShareModal.vue
+    - frontend/src/components/cloud/CloudCredentialModal.vue
+    - frontend/src/components/folders/FolderDeleteModal.vue
+    - frontend/src/components/documents/DocumentPreviewModal.vue
+    - frontend/src/views/DocumentView.vue
+decisions:
+  - "@tailwindcss/forms plugin active in tailwind.config.js — no drift found, verification task complete"
+  - "focus:outline-none focus:ring-2 focus:ring-indigo-500 is the consistent form baseline pattern throughout entire codebase — no normalization needed"
+  - "DocumentPreviewModal stays full-screen (fixed inset-0) — added responsive px-4 sm:px-6 header padding for narrow viewports"
+  - "DocumentView inline cloud-delete warning modal receives same max-h treatment as dedicated modal components"
+metrics:
+  duration_minutes: 7
+  tasks_completed: 5
+  files_created: 4
+  files_modified: 5
+  completed_date: "2026-06-16"
+---
+
+# Phase 11 Plan 4: Forms Baseline & Mobile-Safe Modals Summary
+
+Verified `@tailwindcss/forms` remains active with a consistent form focus pattern throughout the codebase, and updated all four modal components plus one inline modal to scroll safely on narrow mobile viewports (375x667px).
+
+## What Was Built
+
+### Task 1 — Forms plugin verification
+
+`frontend/tailwind.config.js` confirmed: `import forms from '@tailwindcss/forms'` and `plugins: [forms]` are active. No drift.
+
+### Tasks 2-3 — Form baseline audit and normalization
+
+Full audit of all `<input>`, `<select>`, `<textarea>`, `<input type="checkbox">`, and `<input type="radio">` elements across all Vue components. Findings:
+
+- **Consistent pattern throughout:** `focus:outline-none focus:ring-2 focus:ring-indigo-500` (or `focus:ring-indigo-400` in topic-related components). This is already the standardized baseline.
+- **No conflicting per-component reset styles** found (no `appearance-none`, no `webkit-appearance`, no inline `outline: none`).
+- **No normalization required** — the codebase is already consistent. The forms plugin resets browser defaults and the `focus:ring-*` utility classes provide the visual indicator.
+
+### Task 4 — Modal mobile-safe updates (RESP-04)
+
+All modal panels now have `max-h-[90vh] overflow-y-auto` added to their panel containers:
+
+**`ShareModal.vue`**
+- Panel `class` updated: added `max-h-[90vh] overflow-y-auto`
+- Added `data-test="share-modal-panel"` for testability
+
+**`CloudCredentialModal.vue`**
+- Panel `class` updated: added `max-h-[90vh] overflow-y-auto`
+- Added `data-test="cloud-credential-modal-panel"` for testability
+- The tall WebDAV/Nextcloud form with server URL, username, auth method toggle, advanced section, and password field now scrolls safely on 375px height-constrained viewports
+
+**`FolderDeleteModal.vue`**
+- Panel `class` updated: added `max-h-[90vh] overflow-y-auto`
+- Added `data-test="folder-delete-modal-panel"` for testability
+
+**`DocumentPreviewModal.vue`**
+- Full-screen overlay preserved (`fixed inset-0 flex flex-col`) — this modal intentionally uses the entire viewport
+- Header padding made responsive: `px-4 sm:px-6` (was `px-6`) — prevents filename and close button from touching screen edges at 375px
+- Added `data-test="document-preview-modal"` on overlay and `data-test="preview-modal-header"` on header bar
+
+**`DocumentView.vue` (inline cloud-delete warning modal)**
+- Inline modal panel updated: added `max-h-[90vh] overflow-y-auto`
+- Added `data-test="cloud-delete-modal-panel"` for testability
+
+### Task 5 — Tests
+
+Four new test files created (34 total test files in worktree, 234 tests all pass):
+
+**`ShareModal.mobile.test.js`** (5 tests):
+- VISUAL-02: text input has `focus:ring-2 focus:outline-none` (form baseline)
+- VISUAL-02: select has `focus:ring-2 focus:outline-none` (form baseline)
+- RESP-04: panel has `max-h-[90vh]`
+- RESP-04: panel has `overflow-y-auto`
+- RESP-04: panel has `mx-4` for narrow viewport fit
+
+**`CloudCredentialModal.mobile.test.js`** (3 tests):
+- RESP-04: panel has `max-h-[90vh]`
+- RESP-04: panel has `overflow-y-auto`
+- RESP-04: panel not rendered when `show=false` (v-if gate verified)
+
+**`FolderDeleteModal.mobile.test.js`** (4 tests):
+- RESP-04: panel has `max-h-[90vh]`
+- RESP-04: panel has `overflow-y-auto`
+- RESP-04: panel has `mx-4`
+- Action buttons are accessible (text content check)
+
+**`DocumentPreviewModal.mobile.test.js`** (3 tests):
+- RESP-04: full-screen overlay has `fixed inset-0` classes
+- RESP-04: header has `px-4` (mobile) and `sm:px-6` (640px+)
+- RESP-04: filename `span` has `truncate` class preventing overflow
+
+## Verification
+
+- `npm run test -- --run` (via `./node_modules/.bin/vitest run`): **34 test files, 234 tests, all pass**
+- `npm run build` (via `./node_modules/.bin/vite build`): **succeeds** — all 5 JS chunks + main bundle build cleanly
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Known Stubs
+
+None.
+
+## Threat Flags
+
+None — no network endpoints, auth paths, file access patterns, or schema changes. All changes are frontend layout/presentation classes and test files.
+
+## Self-Check: PASSED
+
+- `frontend/src/components/sharing/ShareModal.vue`: modified — max-h + overflow-y-auto + data-test
+- `frontend/src/components/cloud/CloudCredentialModal.vue`: modified — max-h + overflow-y-auto + data-test
+- `frontend/src/components/folders/FolderDeleteModal.vue`: modified — max-h + overflow-y-auto + data-test
+- `frontend/src/components/documents/DocumentPreviewModal.vue`: modified — responsive px-4, data-test attrs
+- `frontend/src/views/DocumentView.vue`: modified — inline modal max-h + data-test
+- `frontend/src/components/sharing/__tests__/ShareModal.mobile.test.js`: created — 5 tests
+- `frontend/src/components/cloud/__tests__/CloudCredentialModal.mobile.test.js`: created — 3 tests
+- `frontend/src/components/folders/__tests__/FolderDeleteModal.mobile.test.js`: created — 4 tests
+- `frontend/src/components/documents/__tests__/DocumentPreviewModal.mobile.test.js`: created — 3 tests
+- Commit `df53cef` exists in git log: confirmed
+- 34 test files, 234 tests all pass: confirmed
+- Build succeeds: confirmed