89 lines
3.3 KiB
Markdown
89 lines
3.3 KiB
Markdown
---
|
|
phase: 11-visual-design-responsive-layout-cleanup
|
|
plan: 7
|
|
subsystem: frontend
|
|
tags: [gap-closure, mobile, responsive, storage-browser, uat]
|
|
dependency_graph:
|
|
requires: [11-UAT]
|
|
provides: [RESP-02, RESP-03, VISUAL-03-gap-closure]
|
|
affects: [frontend/src/components/storage, frontend/src/components/documents, docs]
|
|
tech_stack:
|
|
added: []
|
|
patterns:
|
|
- "StorageBrowser remains the single file browser surface"
|
|
- "Mobile toolbar uses icon buttons below sm; full controls remain at sm+"
|
|
key_files:
|
|
modified:
|
|
- frontend/src/components/storage/StorageBrowser.vue
|
|
- frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
|
|
- frontend/src/components/documents/SearchBar.vue
|
|
- backend/main.py
|
|
- frontend/package.json
|
|
- frontend/package-lock.json
|
|
- README.md
|
|
- AGENTS.md
|
|
- .planning/ROADMAP.md
|
|
created: []
|
|
metrics:
|
|
completed: 2026-06-17
|
|
tests_after: 277
|
|
version: 0.1.4
|
|
---
|
|
|
|
# Phase 11 Plan 7: Mobile Storage Toolbar and Action Visibility Summary
|
|
|
|
Closed the Phase 11 UAT mobile storage gaps found during `/gsd:verify-work 11`.
|
|
|
|
## Changes
|
|
|
|
### Touch-safe row actions
|
|
|
|
- Removed hover-only visibility from folder and file row action containers.
|
|
- Row action buttons are now visible by default on touch devices.
|
|
- Preserved the 36px minimum touch target classes below `md`.
|
|
- Widened the mobile action grid column to fit three visible file actions without requiring horizontal scroll.
|
|
|
|
### Compact mobile toolbar
|
|
|
|
- Split `StorageBrowser`'s sticky header into desktop and mobile control groups.
|
|
- Kept the full SearchBar, SortControls, and "New folder" text button at `sm` and above.
|
|
- Added mobile icon buttons for Search, Sort, and New folder below `sm`.
|
|
- Search opens a full-width mobile search row.
|
|
- Sort opens a compact mobile sort panel and emits the existing `sort-change` event shape.
|
|
- New folder icon emits the existing `new-folder` event.
|
|
|
|
### Responsive search width
|
|
|
|
- Updated `SearchBar.vue` so the input is `w-full` on mobile and keeps `sm:w-56` at larger breakpoints.
|
|
|
|
## Verification
|
|
|
|
- `cd frontend && npm run test -- --run src/components/storage/__tests__/StorageBrowser.skeleton.test.js`
|
|
- PASS: 1 file, 22 tests
|
|
- `cd frontend && npm run test -- --run`
|
|
- PASS: 36 files, 277 tests
|
|
- `cd frontend && npm run build`
|
|
- PASS: production build succeeds
|
|
- Existing Vite warning remains: `auth.js` is both dynamically and statically imported.
|
|
|
|
## UAT Gap Mapping
|
|
|
|
| Gap | Resolution |
|
|
|-----|------------|
|
|
| Row actions are hover-only and unsafe on touchscreens | Actions are visible without hover; tests assert no `opacity-0` / `group-hover:opacity-100` classes remain on action containers |
|
|
| Toolbar shifts out of the viewport below ~550px | Mobile controls collapse into icon buttons below `sm`; expanded search/sort content uses full-width rows |
|
|
| Search/sort/new-folder should morph into icons | Implemented icon controls with accessible labels and regression coverage |
|
|
|
|
## Deviations
|
|
|
|
None.
|
|
|
|
## Self-Check
|
|
|
|
- [x] StorageBrowser remains the single local/cloud file browser
|
|
- [x] No backend/API behavior changed beyond patch version bump
|
|
- [x] Mobile row actions visible without hover
|
|
- [x] Mobile search/sort/new-folder controls fit without horizontal scrolling
|
|
- [x] Focus-visible classes retained on new icon buttons
|
|
- [x] Tests and build pass
|