From 595b33a68c171c49beaa3c9dddd344daf25c5471 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Wed, 17 Jun 2026 10:48:35 +0200
Subject: [PATCH] fix(phase-11): close mobile storage UAT gaps

---
 .planning/ROADMAP.md                          |   7 +-
 .../11-07-SUMMARY.md                          |  88 +++++++++++++
 README.md                                     |   3 +-
 backend/main.py                               |   2 +-
 frontend/package.json                         |   2 +-
 .../src/components/documents/SearchBar.vue    |   4 +-
 .../src/components/storage/StorageBrowser.vue | 117 +++++++++++++-----
 .../__tests__/StorageBrowser.skeleton.test.js | 110 ++++++++++++++--
 8 files changed, 283 insertions(+), 50 deletions(-)
 create mode 100644 .planning/phases/11-visual-design-responsive-layout-cleanup/11-07-SUMMARY.md

diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md
index 7c93958..82bba5b 100644
--- a/.planning/ROADMAP.md
+++ b/.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 |
 
 ---
 
diff --git a/.planning/phases/11-visual-design-responsive-layout-cleanup/11-07-SUMMARY.md b/.planning/phases/11-visual-design-responsive-layout-cleanup/11-07-SUMMARY.md
new file mode 100644
index 0000000..485a34b
--- /dev/null
+++ b/.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
diff --git a/README.md b/README.md
index 0e19c9d..5c15d4d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # DocuVault
 
-**Version 0.1.0 — Alpha**
+**Version 0.1.4 — Alpha**
 
 > **Not production-ready.** DocuVault is functional for local and self-hosted use but has not been audited or hardened for public internet exposure. APIs, environment variables, and the database schema may change without notice until a stable 1.0 release is declared.
 
@@ -13,6 +13,7 @@ A self-hosted, multi-user document management platform with AI-powered topic cla
 - **Document management** — upload PDF, DOCX, images, and plain text; full-text extraction stored in PostgreSQL
 - **AI classification** — automatic topic tagging via LM Studio (local), Ollama, OpenAI, Anthropic, or any OpenAI-compatible provider (Groq, xAI, DeepSeek, OpenRouter, Gemini, Mistral)
 - **Folder organisation** — hierarchical folders with move, rename, and delete; breadcrumb navigation
+- **Responsive file browser** — mobile sidebar drawer, compact search/sort/new-folder controls, visible touch-safe row actions, and responsive document columns
 - **Document sharing** — share by user handle with view or edit permission; "Shared with me" virtual folder; per-recipient revocation
 - **Storage quota** — per-user limit enforced atomically; amber/red quota bar at 80 % / 95 %; quota decremented on delete
 - **Cloud storage backends** — connect OneDrive, Google Drive, Nextcloud, or any WebDAV server as a personal storage backend; credentials encrypted with HKDF per-user keys
diff --git a/backend/main.py b/backend/main.py
index 5fdee79..605af37 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -244,7 +244,7 @@ async def lifespan(app: FastAPI):
 
 # ── Application factory ───────────────────────────────────────────────────────
 
-app = FastAPI(title="Document Scanner API", version="0.1.3", lifespan=lifespan)
+app = FastAPI(title="Document Scanner API", version="0.1.4", lifespan=lifespan)
 
 # Rate limiter state (slowapi)
 app.state.limiter = auth_limiter
diff --git a/frontend/package.json b/frontend/package.json
index c323ad8..38394d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "document-scanner-frontend",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/documents/SearchBar.vue b/frontend/src/components/documents/SearchBar.vue
index 2bee61e..068b2b2 100644
--- a/frontend/src/components/documents/SearchBar.vue
+++ b/frontend/src/components/documents/SearchBar.vue
@@ -1,12 +1,12 @@
 <template>
-  <div role="search">
+  <div role="search" class="w-full sm:w-auto">
     <input
       ref="inputEl"
       :value="modelValue"
       type="search"
       :placeholder="placeholder"
       aria-label="Search documents"
-      class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-56 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+      class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-full sm:w-56 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
       @input="emit('update:modelValue', $event.target.value)"
       @keydown.escape.prevent.stop="emit('update:modelValue', '')"
     />
diff --git a/frontend/src/components/storage/StorageBrowser.vue b/frontend/src/components/storage/StorageBrowser.vue
index 13fb1bf..823c0d5 100644
--- a/frontend/src/components/storage/StorageBrowser.vue
+++ b/frontend/src/components/storage/StorageBrowser.vue
@@ -2,40 +2,92 @@
   <div class="flex flex-col h-full">
 
     <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
-      <div class="px-6 py-3 flex items-center gap-3 flex-wrap">
-        <BreadcrumbBar
-          :segments="breadcrumb"
-          :root-label="mode === 'cloud' ? 'Cloud' : 'Home'"
-          @navigate="$emit('breadcrumb-navigate', $event)"
-        />
-        <div class="ml-auto flex items-center gap-2 shrink-0">
-          <SearchBar v-if="showSearch" ref="searchBarRef" :model-value="searchQuery" @update:modelValue="$emit('search-change', $event)" />
+      <div class="px-4 sm:px-6 py-3 space-y-2">
+        <div class="flex items-center gap-3 min-w-0">
+          <div class="min-w-0 flex-1">
+            <BreadcrumbBar
+              :segments="breadcrumb"
+              :root-label="mode === 'cloud' ? 'Cloud' : 'Home'"
+              @navigate="$emit('breadcrumb-navigate', $event)"
+            />
+          </div>
+          <div class="hidden sm:flex items-center gap-2 shrink-0" data-test="desktop-toolbar">
+            <SearchBar v-if="showSearch" ref="searchBarRef" :model-value="searchQuery" @update:modelValue="$emit('search-change', $event)" />
+            <SortControls
+              v-if="showSearch"
+              :sort="sortField"
+              :order="sortOrder"
+              @change="handleSortChange"
+            />
+            <button
+              v-if="mode === 'local'"
+              @click="$emit('new-folder')"
+              class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 border border-indigo-200 hover:bg-indigo-50 active:bg-indigo-100 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
+            >
+              <AppIcon name="plus" class="w-4 h-4" />
+              New folder
+            </button>
+          </div>
+          <div class="sm:hidden flex items-center gap-1 shrink-0" data-test="mobile-toolbar">
+            <button
+              v-if="showSearch"
+              type="button"
+              title="Search"
+              aria-label="Search"
+              :aria-expanded="mobileSearchOpen"
+              class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 active:bg-gray-100 flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
+              @click="mobileSearchOpen = !mobileSearchOpen"
+            >
+              <AppIcon name="search" class="w-4 h-4" />
+            </button>
+            <button
+              v-if="showSearch"
+              type="button"
+              title="Sort"
+              aria-label="Sort"
+              :aria-expanded="mobileSortOpen"
+              class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 active:bg-gray-100 flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
+              @click="mobileSortOpen = !mobileSortOpen"
+            >
+              <AppIcon name="chartBar" class="w-4 h-4" />
+            </button>
+            <button
+              v-if="mode === 'local'"
+              type="button"
+              title="New folder"
+              aria-label="New folder"
+              class="w-9 h-9 rounded-lg border border-indigo-200 text-indigo-600 hover:bg-indigo-50 active:bg-indigo-100 flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
+              @click="$emit('new-folder')"
+            >
+              <AppIcon name="plus" class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+        <div v-if="showSearch && mobileSearchOpen" class="sm:hidden w-full" data-test="mobile-search-row">
+          <SearchBar ref="searchBarRef" :model-value="searchQuery" @update:modelValue="$emit('search-change', $event)" />
+        </div>
+        <div
+          v-if="showSearch && mobileSortOpen"
+          class="sm:hidden w-full rounded-lg border border-gray-200 bg-gray-50 px-2 py-2"
+          data-test="mobile-sort-panel"
+        >
           <SortControls
-            v-if="showSearch"
             :sort="sortField"
             :order="sortOrder"
-            @change="$emit('sort-change', $event)"
+            @change="handleSortChange"
           />
-          <button
-            v-if="mode === 'local'"
-            @click="$emit('new-folder')"
-            class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-indigo-600 border border-indigo-200 hover:bg-indigo-50 active:bg-indigo-100 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
-          >
-            <AppIcon name="plus" class="w-4 h-4" />
-            New folder
-          </button>
         </div>
       </div>
     </div>
 
     <div class="flex-1 overflow-y-auto flex flex-col">
 
-      <div class="px-6 pt-5 pb-3">
+      <div class="px-4 sm:px-6 pt-5 pb-3">
         <DropZone ref="dropZoneRef" @files-selected="$emit('upload', $event)" />
         <UploadProgress :items="uploadQueue" />
       </div>
 
-      <div class="mx-6 px-4 py-2 grid grid-cols-[2rem_1fr_6rem] sm:grid-cols-[2rem_1fr_8rem_6rem] md:grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center rounded-lg bg-gray-50 text-xs font-semibold text-gray-400 uppercase tracking-wider select-none" data-test="list-header">
+      <div class="mx-4 sm:mx-6 px-4 py-2 grid grid-cols-[2rem_minmax(0,1fr)_7rem] sm:grid-cols-[2rem_minmax(0,1fr)_8rem_7rem] md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem] gap-3 items-center rounded-lg bg-gray-50 text-xs font-semibold text-gray-400 uppercase tracking-wider select-none" data-test="list-header">
         <span></span>
         <span>Name</span>
         <span class="text-right hidden md:block">Size</span>
@@ -43,17 +95,17 @@
         <span></span>
       </div>
 
-      <div v-if="showNewFolderInput" class="mx-6 mt-1 px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem] sm:grid-cols-[2rem_1fr_8rem_6rem] md:grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center rounded-lg border border-amber-200 bg-amber-50/40">
+      <div v-if="showNewFolderInput" class="mx-4 sm:mx-6 mt-1 px-4 py-2.5 grid grid-cols-[2rem_minmax(0,1fr)_7rem] sm:grid-cols-[2rem_minmax(0,1fr)_8rem_7rem] md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem] gap-3 items-center rounded-lg border border-amber-200 bg-amber-50/40">
         <div class="w-7 h-7 bg-amber-50 rounded-lg flex items-center justify-center">
           <AppIcon name="folder" class="w-4 h-4 text-amber-400" />
         </div>
-        <div class="flex items-center gap-2 col-span-4">
+        <div class="flex items-center gap-2 col-span-2 sm:col-span-3 md:col-span-4 min-w-0 flex-wrap">
           <input
             ref="newFolderInputRef"
             v-model="newFolderName"
             type="text"
             placeholder="Folder name"
-            class="border border-gray-300 rounded-lg px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            class="border border-gray-300 rounded-lg px-2 py-1 text-sm min-w-0 flex-1 focus:outline-none focus:ring-2 focus:ring-indigo-500"
             @keydown.enter="submitNewFolder"
             @keydown.escape="cancelNewFolder"
           />
@@ -63,12 +115,12 @@
         </div>
       </div>
 
-      <div class="mx-6 mt-1 mb-6 flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
+      <div class="mx-4 sm:mx-6 mt-1 mb-6 flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-xl overflow-hidden">
 
         <div
           v-for="folder in folders"
           :key="`f-${folder.id}`"
-          class="px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem] sm:grid-cols-[2rem_1fr_8rem_6rem] md:grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors"
+          class="px-4 py-2.5 grid grid-cols-[2rem_minmax(0,1fr)_7rem] sm:grid-cols-[2rem_minmax(0,1fr)_8rem_7rem] md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors"
           :class="{
             'bg-amber-50 ring-2 ring-inset ring-amber-300': dragOverFolderId === folder.id,
             'bg-gray-50': renamingId === folder.id,
@@ -97,7 +149,7 @@
           <span class="text-right text-xs text-gray-400 hidden md:block">—</span>
           <span class="text-right text-xs text-gray-400 hidden sm:block">{{ formatDate(folder.created_at) }}</span>
 
-          <div class="flex justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop>
+          <div class="flex justify-end gap-0.5" data-test="folder-row-actions" @click.stop>
             <template v-if="mode === 'local'">
               <button @click.stop="startRename(folder)" title="Rename"
                 class="p-1.5 md:p-1.5 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 rounded hover:bg-gray-200 active:bg-gray-300 text-gray-400 hover:text-gray-700 transition-colors flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1">
@@ -116,7 +168,7 @@
           v-for="file in files"
           :key="`d-${file.id}`"
           :draggable="mode === 'local'"
-          class="px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem] sm:grid-cols-[2rem_1fr_8rem_6rem] md:grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors select-none"
+          class="px-4 py-2.5 grid grid-cols-[2rem_minmax(0,1fr)_7rem] sm:grid-cols-[2rem_minmax(0,1fr)_8rem_7rem] md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem] gap-3 items-center hover:bg-gray-50 group cursor-pointer transition-colors select-none"
           :class="{ 'opacity-50': draggingFile?.id === file.id }"
           @click="draggingFile ? null : $emit('file-open', file)"
           @dragstart="mode === 'local' ? onFileDragStart(file, $event) : null"
@@ -144,7 +196,7 @@
           <span class="text-right text-xs text-gray-400 hidden md:block">{{ formatSize(file.size_bytes ?? file.size) }}</span>
           <span class="text-right text-xs text-gray-400 hidden sm:block">{{ formatDate(file.created_at) }}</span>
 
-          <div class="flex justify-end gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop>
+          <div class="flex justify-end gap-0.5" data-test="file-row-actions" @click.stop>
             <template v-if="mode === 'local'">
               <button @click.stop="$emit('file-share', file)" title="Share"
                 class="p-1.5 min-w-[36px] min-h-[36px] md:min-w-0 md:min-h-0 rounded hover:bg-gray-200 active:bg-gray-300 text-gray-400 hover:text-gray-700 transition-colors flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1">
@@ -171,7 +223,7 @@
           <div
             v-for="n in 5"
             :key="`sk-${n}`"
-            class="px-4 py-2.5 grid grid-cols-[2rem_1fr_6rem] sm:grid-cols-[2rem_1fr_8rem_6rem] md:grid-cols-[2rem_1fr_6rem_8rem_6rem] gap-3 items-center border-b border-gray-100"
+            class="px-4 py-2.5 grid grid-cols-[2rem_minmax(0,1fr)_7rem] sm:grid-cols-[2rem_minmax(0,1fr)_8rem_7rem] md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem] gap-3 items-center border-b border-gray-100"
           >
             <div class="w-7 h-7 bg-gray-100 rounded-lg animate-pulse"></div>
             <div class="h-4 bg-gray-100 rounded animate-pulse w-2/3"></div>
@@ -292,6 +344,8 @@ function topicColor(name) {
 
 const dropZoneRef = ref(null)
 const searchBarRef = ref(null)
+const mobileSearchOpen = ref(false)
+const mobileSortOpen = ref(false)
 
 const showNewFolderInput = ref(false)
 const newFolderName = ref('')
@@ -310,6 +364,11 @@ function cancelNewFolder() {
   newFolderError.value = ''
 }
 
+function handleSortChange(payload) {
+  emit('sort-change', payload)
+  mobileSortOpen.value = false
+}
+
 async function submitNewFolder() {
   const name = newFolderName.value.trim()
   if (!name) {
diff --git a/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js b/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
index 24cbc35..6e31ea6 100644
--- a/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
+++ b/frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js
@@ -46,23 +46,21 @@ describe('UX-02: StorageBrowser shows skeleton rows during loading', () => {
     expect(pulseEls.length).toBe(0)
   })
 
-  it('skeleton row has mobile base grid-cols-[2rem_1fr_6rem] class', () => {
+  it('skeleton row has mobile base icon/name/actions grid class', () => {
     const wrapper = mount(StorageBrowser, {
       props: { loading: true, folders: [], files: [] },
       global: { stubs: globalStubs },
     })
-    // Responsive grid: mobile base class (replaces old fixed grid-cols-[2rem_1fr_6rem_8rem_6rem])
-    const skeletonGrids = wrapper.findAll('.grid-cols-\\[2rem_1fr_6rem\\]')
+    const skeletonGrids = wrapper.findAll('.grid-cols-\\[2rem_minmax\\(0\\,1fr\\)_7rem\\]')
     expect(skeletonGrids.length).toBeGreaterThanOrEqual(1)
   })
 
-  it('skeleton row has md breakpoint full grid-cols-[2rem_1fr_6rem_8rem_6rem] class', () => {
+  it('skeleton row has md breakpoint full grid class', () => {
     const wrapper = mount(StorageBrowser, {
       props: { loading: true, folders: [], files: [] },
       global: { stubs: globalStubs },
     })
-    // Responsive grid: full-desktop class at md breakpoint
-    const skeletonGrids = wrapper.findAll('.md\\:grid-cols-\\[2rem_1fr_6rem_8rem_6rem\\]')
+    const skeletonGrids = wrapper.findAll('.md\\:grid-cols-\\[2rem_minmax\\(0\\,1fr\\)_6rem_8rem_7rem\\]')
     expect(skeletonGrids.length).toBeGreaterThanOrEqual(1)
   })
 })
@@ -84,14 +82,14 @@ describe('RESP-02/RESP-03: StorageBrowser responsive column classes and touch ta
     setActivePinia(createPinia())
   })
 
-  it('list header has mobile base grid-cols-[2rem_1fr_6rem] class', () => {
+  it('list header has mobile base icon/name/actions grid class', () => {
     const wrapper = mount(StorageBrowser, {
       props: { mode: 'local', folders: [SAMPLE_FOLDER], files: [], loading: false },
       global: { stubs: globalStubs },
     })
     const header = wrapper.find('[data-test="list-header"]')
     expect(header.exists()).toBe(true)
-    expect(header.classes()).toContain('grid-cols-[2rem_1fr_6rem]')
+    expect(header.classes()).toContain('grid-cols-[2rem_minmax(0,1fr)_7rem]')
   })
 
   it('list header has md breakpoint full-column class', () => {
@@ -100,25 +98,25 @@ describe('RESP-02/RESP-03: StorageBrowser responsive column classes and touch ta
       global: { stubs: globalStubs },
     })
     const header = wrapper.find('[data-test="list-header"]')
-    expect(header.classes()).toContain('md:grid-cols-[2rem_1fr_6rem_8rem_6rem]')
+    expect(header.classes()).toContain('md:grid-cols-[2rem_minmax(0,1fr)_6rem_8rem_7rem]')
   })
 
-  it('folder row has mobile base grid-cols-[2rem_1fr_6rem] class', () => {
+  it('folder row has mobile base icon/name/actions grid class', () => {
     const wrapper = mount(StorageBrowser, {
       props: { mode: 'local', folders: [SAMPLE_FOLDER], files: [], loading: false },
       global: { stubs: globalStubs },
     })
-    const folderRows = wrapper.findAll('.grid-cols-\\[2rem_1fr_6rem\\]')
+    const folderRows = wrapper.findAll('.grid-cols-\\[2rem_minmax\\(0\\,1fr\\)_7rem\\]')
     // At least the folder row and header exist
     expect(folderRows.length).toBeGreaterThanOrEqual(1)
   })
 
-  it('file row has mobile base grid-cols-[2rem_1fr_6rem] class', () => {
+  it('file row has mobile base icon/name/actions grid class', () => {
     const wrapper = mount(StorageBrowser, {
       props: { mode: 'local', folders: [], files: [SAMPLE_FILE], loading: false },
       global: { stubs: globalStubs },
     })
-    const fileRows = wrapper.findAll('.grid-cols-\\[2rem_1fr_6rem\\]')
+    const fileRows = wrapper.findAll('.grid-cols-\\[2rem_minmax\\(0\\,1fr\\)_7rem\\]')
     expect(fileRows.length).toBeGreaterThanOrEqual(1)
   })
 
@@ -165,6 +163,92 @@ describe('RESP-02/RESP-03: StorageBrowser responsive column classes and touch ta
       expect(btn.classes()).toContain('min-h-[36px]')
     }
   })
+
+  it('file row actions are visible without hover-only opacity classes', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', folders: [], files: [SAMPLE_FILE], loading: false },
+      global: { stubs: globalStubs },
+    })
+    const actions = wrapper.find('[data-test="file-row-actions"]')
+    expect(actions.exists()).toBe(true)
+    expect(actions.classes()).not.toContain('opacity-0')
+    expect(actions.classes()).not.toContain('group-hover:opacity-100')
+  })
+
+  it('folder row actions are visible without hover-only opacity classes', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', folders: [SAMPLE_FOLDER], files: [], loading: false },
+      global: { stubs: globalStubs },
+    })
+    const actions = wrapper.find('[data-test="folder-row-actions"]')
+    expect(actions.exists()).toBe(true)
+    expect(actions.classes()).not.toContain('opacity-0')
+    expect(actions.classes()).not.toContain('group-hover:opacity-100')
+  })
+})
+
+describe('Plan 11-07: StorageBrowser compact mobile toolbar', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('renders icon-only mobile controls and hides full toolbar below sm', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', folders: [], files: [], loading: false },
+      global: { stubs: globalStubs },
+    })
+
+    const mobileToolbar = wrapper.find('[data-test="mobile-toolbar"]')
+    const desktopToolbar = wrapper.find('[data-test="desktop-toolbar"]')
+    expect(mobileToolbar.exists()).toBe(true)
+    expect(mobileToolbar.classes()).toContain('sm:hidden')
+    expect(desktopToolbar.exists()).toBe(true)
+    expect(desktopToolbar.classes()).toContain('hidden')
+    expect(desktopToolbar.classes()).toContain('sm:flex')
+    expect(wrapper.find('button[aria-label="Search"]').exists()).toBe(true)
+    expect(wrapper.find('button[aria-label="Sort"]').exists()).toBe(true)
+    expect(wrapper.find('button[aria-label="New folder"]').exists()).toBe(true)
+  })
+
+  it('search icon toggles a full-width mobile search row', async () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', folders: [], files: [], loading: false },
+      global: { stubs: globalStubs },
+    })
+
+    expect(wrapper.find('[data-test="mobile-search-row"]').exists()).toBe(false)
+    await wrapper.find('button[aria-label="Search"]').trigger('click')
+    await nextTick()
+    const row = wrapper.find('[data-test="mobile-search-row"]')
+    expect(row.exists()).toBe(true)
+    expect(row.classes()).toContain('w-full')
+  })
+
+  it('sort icon opens mobile sort options and emits sort-change', async () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', folders: [], files: [], loading: false },
+      global: { stubs: { ...globalStubs, SortControls: false } },
+    })
+
+    await wrapper.find('button[aria-label="Sort"]').trigger('click')
+    await nextTick()
+    const panel = wrapper.find('[data-test="mobile-sort-panel"]')
+    expect(panel.exists()).toBe(true)
+    await panel.findAll('button').find(btn => btn.text().includes('Name')).trigger('click')
+
+    expect(wrapper.emitted('sort-change')).toEqual([[{ sort: 'name', order: 'desc' }]])
+    expect(wrapper.find('[data-test="mobile-sort-panel"]').exists()).toBe(false)
+  })
+
+  it('new-folder icon emits the existing new-folder event', async () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { mode: 'local', folders: [], files: [], loading: false },
+      global: { stubs: globalStubs },
+    })
+
+    await wrapper.find('button[aria-label="New folder"]').trigger('click')
+    expect(wrapper.emitted('new-folder')).toHaveLength(1)
+  })
 })
 
 describe('UX-13: StorageBrowser folder picker uses Teleport + getBoundingClientRect', () => {