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

2.3 KiB
Raw Blame History

phase, plan, type, wave, depends_on, requirements, files_modified, autonomous
phase plan type wave depends_on requirements files_modified autonomous
11-visual-design-responsive-layout-cleanup 3 execute 2
11-02
RESP-01
RESP-02
RESP-03
RESP-05
frontend/src/App.vue
frontend/src/layouts/AdminLayout.vue
frontend/src/components/layout/AppSidebar.vue
frontend/src/components/admin/AdminSidebar.vue
frontend/src/components/storage/StorageBrowser.vue
frontend/src/__tests__/keyboard.test.js
frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
true

Plan 11-03 — Responsive Shells & Storage Rows

Objective

Make both user and admin layouts usable below lg, and make storage rows fit smaller viewports without losing core actions.

Tasks

  1. Use layout-local drawer refs, not a new Pinia store:
    • App.vue owns user drawer state.
    • AdminLayout.vue owns admin drawer state.
    • Watch route changes in each layout root and close the drawer after navigation.
    • Do not put drawer state in AppSidebar.vue or AdminSidebar.vue.
  2. Add a mobile-only header with a hamburger button for the user layout.
  3. Hide AppSidebar below lg; open it in a slide-in overlay drawer with backdrop tap, route-change close, and translate-x-0 / -translate-x-full transition.
  4. Apply the same responsive shell behavior to AdminLayout and AdminSidebar.
  5. Update StorageBrowser row/grid classes so:
    • Size column hides below md
    • Modified column hides below sm
    • icon, name, and actions remain visible
    • grid templates do not reserve hidden column widths on mobile
  6. Ensure inline icon action buttons have at least 36px touch targets below md.
  7. Add or update tests for drawer open/close, route-change close, admin drawer behavior, responsive column classes, and touch target classes.
  8. Verify with browser screenshots or Playwright at 375px, 768px, 1024px, and desktop width.

Acceptance Criteria

  • User sidebar is hidden below 1024px and accessible through a hamburger drawer.
  • Admin sidebar has matching mobile behavior.
  • Drawer closes on backdrop tap and navigation tap.
  • Storage rows satisfy RESP-02 without horizontal overflow at 375px.
  • Icon actions satisfy RESP-03.
  • Drawer state is owned only by App.vue and AdminLayout.vue.
  • Frontend tests and build pass.
Reference in New Issue View Git Blame Copy Permalink