curo1305andClaude Sonnet 4.6
123ae5b29b
Moves phases 08–11 execution artifacts from .planning/phases/ to .planning/milestones/v0.2-phases/ to keep .planning/phases/ clean for the next milestone. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
41 lines
1.8 KiB
Markdown
41 lines
1.8 KiB
Markdown
---
|
|
phase: 11-visual-design-responsive-layout-cleanup
|
|
plan: 4
|
|
type: execute
|
|
wave: 3
|
|
depends_on: [11-03]
|
|
requirements: [VISUAL-02, RESP-04]
|
|
files_modified:
|
|
- frontend/tailwind.config.js
|
|
- frontend/src/components/**/*.vue
|
|
- frontend/src/views/**/*.vue
|
|
autonomous: true
|
|
---
|
|
|
|
# Plan 11-04 — Forms Baseline & Mobile-Safe Modals
|
|
|
|
## Objective
|
|
|
|
Normalize form controls through `@tailwindcss/forms` and make every modal scroll safely on mobile viewports.
|
|
|
|
## Tasks
|
|
|
|
1. Confirm `@tailwindcss/forms` remains installed and active in `tailwind.config.js`; it is already wired today, so this should be a verification step unless execution finds drift.
|
|
2. Audit inputs, selects, textareas, checkboxes, and radio buttons for conflicting per-component browser-reset styles.
|
|
3. Normalize form classes to the smallest consistent Tailwind pattern already used by the app.
|
|
4. Update modal shells so content below 640px is scrollable and never exceeds viewport height:
|
|
- `ShareModal.vue`: centered panel gets mobile `max-h` and `overflow-y-auto`.
|
|
- `CloudCredentialModal.vue`: tall WebDAV/Nextcloud form gets mobile `max-h` and `overflow-y-auto`.
|
|
- `FolderDeleteModal.vue`: adopt the same mobile-safe panel pattern.
|
|
- `DocumentPreviewModal.vue`: preserve full-screen preview but verify header/content sizing at narrow widths.
|
|
- any auth/account confirmation modal-like surfaces found in the audit
|
|
5. Add focused tests or DOM assertions for mobile-safe modal classes and form baseline coverage.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- Forms plugin is active and relied on consistently.
|
|
- No modal content overflows a 375x667 viewport.
|
|
- No modal text or action row is clipped below 640px.
|
|
- The desktop modal appearance remains behaviorally unchanged.
|
|
- `npm run test -- --run` and `npm run build` pass.
|