fix(phase-11): close mobile storage UAT gaps

.planning/ROADMAP.md

@@ -696,8 +696,9 @@ _Started: 2026-06-07_
 - `CODE-07` dead-code deletion sweeps all unreferenced files, components, stores, and unused imports. Deletion happens after all other changes in this phase are complete — delete only what is confirmed unreferenced after all additions.
 - `VISUAL-02` requires the `@tailwindcss/forms` plugin (already listed in PERF-01) to be configured in `tailwind.config.js`.
 - `RESP-02`: `StorageBrowser`'s grid hides the Size column below `md` and Modified below `sm`. Icon, name, and actions are always visible.
-- `RESP-03`: inline icon action buttons have minimum 36×36px touch target below `md`.
+- `RESP-03`: inline icon action buttons have minimum 36×36px touch target below `md`; storage row actions are visible without hover on touch devices.
 - `RESP-04`: all modal dialogs are scrollable on viewports below 640px.
+- UAT gap closure 11-07: below `sm`, StorageBrowser search/sort/new-folder collapse into compact icon controls so the toolbar fits below ~550px without horizontal scrolling.
 
 **Success Criteria** (what must be TRUE):
 1. At 375px viewport width, the app is fully usable: the sidebar is hidden, the hamburger opens an overlay drawer, the document list shows only icon/name/actions columns, and all touch targets are at least 36×36px
@@ -705,7 +706,7 @@ _Started: 2026-06-07_
 3. Every button, card row, and interactive link has a visible `focus-visible:` ring and a distinct hover state; no interactive element is style-identical in focused and unfocused states
 4. No arbitrary pixel value (`px-[13px]`, `style="margin: 5px"`, etc.) appears in any template; all spacing is from the Tailwind scale
 5. Two bundle analysis reports are committed to `.planning/` — one baseline and one post-optimization; all non-initial-render routes are lazy-loaded and appear as separate chunks in the report
-**Plans**: TBD
+**Plans**: 11-01 through 11-07 complete
 **UI hint**: yes
 
 ---
@@ -717,7 +718,7 @@ _Started: 2026-06-07_
 | 8. Stack Upgrade & Backend Decomposition | 4/8 | In Progress|  |
 | 9. Admin Panel Rearchitecture | 5/5 | Complete    | 2026-06-13 |
 | 10. UX & Interaction | 13/13 | Complete   | 2026-06-16 |
-| 11. Visual Design, Responsive Layout & Cleanup | 6/6 | Complete   | 2026-06-17 |
+| 11. Visual Design, Responsive Layout & Cleanup | 7/7 | Complete   | 2026-06-17 |
 
 ---
 

.planning/phases/11-visual-design-responsive-layout-cleanup/11-07-SUMMARY.md

@@ -0,0 +1,88 @@
+---
+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