---
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.