curo/kite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
123ae5b29b64f2d0459046549af40754c32542a7
kite/.planning/milestones/v0.2-phases/11-visual-design-responsive-layout-cleanup/11-04-SUMMARY.md
T
curo1305andClaude Sonnet 4.6 123ae5b29b chore: archive v0.2 phase directories to milestones/v0.2-phases/ 
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>
2026-06-17 14:34:52 +02:00

7.2 KiB
Raw Blame History

phase, plan, subsystem, tags, dependency_graph, tech_stack, key_files, decisions, metrics
phase plan subsystem tags dependency_graph tech_stack key_files decisions metrics
11-visual-design-responsive-layout-cleanup 4 frontend/modals
mobile
modals
forms
VISUAL-02
RESP-04
requires provides affects
11-03
mobile-safe-modals
form-baseline-coverage
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
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
created modified
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
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
@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
duration_minutes tasks_completed files_created files_modified completed_date
7 5 4 5 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
Reference in New Issue View Git Blame Copy Permalink