---
phase: 11-visual-design-responsive-layout-cleanup
plan: 3
type: execute
wave: 2
depends_on: [11-02]
requirements: [RESP-01, RESP-02, RESP-03, RESP-05]
files_modified:
  - 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
autonomous: 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.