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

6.8 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 3 frontend/responsive
responsive
layout
drawer
touch-targets
RESP-01
RESP-02
RESP-03
RESP-05
requires provides affects
11-02
responsive-user-shell
responsive-admin-shell
responsive-storage-rows
touch-targets
frontend/src/App.vue
frontend/src/layouts/AdminLayout.vue
frontend/src/components/storage/StorageBrowser.vue
added patterns
Hamburger button + slide-in overlay drawer with Teleport backdrop (translate-x-0/-translate-x-full)
Drawer state owned by layout root (App.vue / AdminLayout.vue), not sidebar component (D-04/D-05)
Route-change watcher closes drawer automatically on navigation
Responsive grid-cols variants: mobile base, sm (+modified), md (all 5 columns)
Touch target floor: min-w-[36px] min-h-[36px] on action buttons
created modified
frontend/src/App.vue
frontend/src/layouts/AdminLayout.vue
frontend/src/components/storage/StorageBrowser.vue
frontend/src/__tests__/keyboard.test.js
frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
Drawer state in App.vue ref (not Pinia, not AppSidebar) — satisfies D-04/D-05 pitfall constraint
Backdrop teleported to <body> via <Teleport to='body'> — consistent with Phase 10 modal/toast pattern
Grid templates use mobile-first responsive variants instead of a fixed 5-column layout — prevents horizontal overflow at 375px
Touch targets applied via min-w/min-h classes at all breakpoints, removed with md:min-w-0 md:min-h-0 at desktop — desktop appearance unchanged
duration_minutes tasks_completed files_created files_modified completed_date
9 8 0 5 2026-06-16

Phase 11 Plan 3: Responsive Shells & Storage Rows Summary

Implemented mobile-first responsive shells for both user and admin layouts using hamburger-triggered slide-in overlay drawers, and made StorageBrowser rows fit small viewports without horizontal overflow.

What Was Built

Tasks 1-3 — App.vue: user layout responsive shell (RESP-01)

frontend/src/App.vue updated:

  • Drawer state: drawerOpen = ref(false) owned by App.vue — satisfies D-04/D-05 constraint (never put in AppSidebar).
  • Route-change close: watch(() => route.fullPath, ...) sets drawerOpen.value = false on every navigation so link taps auto-close the drawer.
  • Mobile header: <header class="lg:hidden fixed ..."> contains the hamburger button (data-test="hamburger-btn") and the DocuVault wordmark. Only shown below lg.
  • Backdrop: <Teleport to="body"> wraps a semi-transparent overlay <div> that appears when drawerOpen is true and calls drawerOpen = false on click. Uses data-test="drawer-backdrop".
  • Sidebar wrapper: fixed inset-y-0 left-0 z-50 positioning for mobile, lg:static lg:z-auto lg:translate-x-0 for desktop. Transition: translate-x-0 (open) / -translate-x-full (closed) via transition-transform duration-200. Attribute data-test="app-sidebar-wrapper".
  • Main content: pt-[53px] lg:pt-0 offset on <main> so mobile content doesn't hide under the fixed header.

Task 4 — AdminLayout.vue: admin layout responsive shell (RESP-05)

frontend/src/layouts/AdminLayout.vue mirrors the user layout pattern exactly:

  • drawerOpen = ref(false) + watch(() => route.fullPath, ...) for auto-close on navigation.
  • Mobile header shows "DocuVault" + "Admin" label with data-test="admin-hamburger-btn".
  • Teleport backdrop with data-test="admin-drawer-backdrop".
  • Sidebar wrapper with data-test="admin-sidebar-wrapper" and identical transition classes.
  • useRoute import added; no useRouter needed (AdminLayout itself doesn't navigate).

Tasks 5-6 — StorageBrowser.vue: responsive grid and touch targets (RESP-02, RESP-03)

frontend/src/components/storage/StorageBrowser.vue updated:

Responsive grid templates (replaces fixed grid-cols-[2rem_1fr_6rem_8rem_6rem] everywhere):

Breakpoint Grid template Visible columns
Default (< sm, 375px) grid-cols-[2rem_1fr_6rem] icon, name, actions
sm (640px+) sm:grid-cols-[2rem_1fr_8rem_6rem] + modified date
md (768px+) md:grid-cols-[2rem_1fr_6rem_8rem_6rem] + size

Applied to: list header row, new-folder input row, folder rows, file rows, skeleton rows.

Added data-test="list-header" to the column header row for testability.

Touch targets (RESP-03, satisfies 36px minimum):

All inline action buttons (Rename, Delete for folders; Share, Move, Delete for files) now have:

  • min-w-[36px] min-h-[36px] — enforces 36×36px minimum hit area on mobile
  • md:min-w-0 md:min-h-0 — removes the override at desktop so padding-only sizing applies
  • flex items-center justify-center — keeps icon centered within the larger target

Task 7 — Tests

frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js updated:

  • Replaced old grid-cols-[2rem_1fr_6rem_8rem_6rem] assertion (now broken by responsive refactor) with two tests: mobile base class grid-cols-[2rem_1fr_6rem] and md breakpoint class md:grid-cols-[2rem_1fr_6rem_8rem_6rem].
  • Added new RESP-02/RESP-03 describe block (8 tests): list header mobile/md classes, folder row, file row, hidden md:block size column, hidden sm:block modified column, file action button min-w-[36px]/min-h-[36px], folder action button touch targets.

frontend/src/__tests__/keyboard.test.js extended:

  • Added RESP-01: App drawer describe (2 tests): hamburger open/backdrop-close behavior via stub component; route-change watcher closes drawer.
  • Added RESP-05: AdminLayout drawer describe (3 tests): admin hamburger renders, admin backdrop-close, admin route-change watcher.
  • afterEach import added; nextTick import added.

Verification

  • npm test: 30 test files, 233 tests pass (219 baseline + 14 new from this plan)
  • npm run build: succeeds — 5 JS chunks + main bundle, no new errors

Deviations from Plan

None — plan executed exactly as written.

Known Stubs

None.

Threat Flags

None — no network endpoints, auth paths, or schema changes in this plan. All changes are frontend layout/presentation only.

Self-Check: PASSED

  • frontend/src/App.vue: modified — hamburger header + drawer + Teleport backdrop
  • frontend/src/layouts/AdminLayout.vue: modified — admin responsive shell
  • frontend/src/components/storage/StorageBrowser.vue: modified — responsive grid + touch targets
  • frontend/src/__tests__/keyboard.test.js: modified — drawer tests added
  • frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js: modified — responsive assertions
  • Commit d914761 exists in git log: confirmed
  • All 30 test files pass: confirmed
  • Build succeeds: confirmed
Reference in New Issue View Git Blame Copy Permalink