---
phase: 11-visual-design-responsive-layout-cleanup
plan: 7
subsystem: frontend
tags: [gap-closure, mobile, responsive, storage-browser, uat]
requirements: [RESP-02, RESP-03, VISUAL-03]
depends_on: [11-UAT]
---

# Plan 11-07 - Mobile Storage Toolbar and Action Visibility Gap Closure

## Goal

Close the Phase 11 UAT gaps for small mobile widths: row actions must be visible without hover, and the StorageBrowser toolbar must fit below 550px by collapsing search, sort, and new-folder controls into compact icon controls.

## Source Gaps

From `11-UAT.md`:

1. Row actions are hover-only, making touchscreen use unsafe and invisible.
2. Search, sort, and new-folder controls overflow to the right below roughly 550px.
3. Mobile file-browser navigation should use icon controls for search/sort/new-folder instead of requiring sideways scrolling.

## Implementation Tasks

### Task 1 - Make row actions visible without hover

Files:
- `frontend/src/components/storage/StorageBrowser.vue`
- `frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js`

Steps:
1. Replace both row action container class stacks that currently include `opacity-0 group-hover:opacity-100 transition-opacity`.
2. Keep actions visible by default. Prefer subdued default icon color plus hover/active background over hiding.
3. Preserve `min-w-[36px] min-h-[36px]` below `md`.
4. Add tests asserting folder and file action containers/buttons are present and visible without a hover state.

Acceptance:
- At 375px, folder/file row actions are visible immediately.
- Delete controls are discoverable; the user does not have to guess where destructive actions live.
- Existing click-after-drag guard and folder picker behavior remain unchanged.

### Task 2 - Add compact mobile toolbar controls

Files:
- `frontend/src/components/storage/StorageBrowser.vue`
- `frontend/src/components/ui/AppIcon.vue` if a missing sort/filter icon is needed
- `frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js`

Steps:
1. Split the sticky header into a responsive layout:
   - Breadcrumb area can wrap/truncate safely.
   - Desktop/tablet controls keep existing full SearchBar, SortControls, and "New folder" text button at `sm` and above.
   - Below `sm`, show icon buttons for search, sort, and new folder.
2. Search icon behavior:
   - Toggles a full-width mobile search input row below the header controls.
   - Search row must fit the viewport, use `w-full`, and preserve Escape-to-clear behavior through the existing search event.
3. Sort icon behavior:
   - Opens a compact menu or panel with Name/Date/Size options.
   - The active option and order must remain visible to screen readers and keyboard users.
   - The panel must fit within viewport width and close after selection.
4. New-folder icon behavior:
   - Emits the existing `new-folder` event.
   - Has `aria-label="New folder"` and a tooltip/title.
5. Avoid creating a new file browser or parallel grid; keep `StorageBrowser.vue` as the single browser surface.

Acceptance:
- At 375px and below 550px, no horizontal scroll is needed to access search, sort, or new-folder.
- Mobile controls are icon-sized, keyboard focusable, and labelled.
- Existing desktop layout remains visually equivalent.

### Task 3 - Add responsive regression tests

Files:
- `frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js`
- Optional: `frontend/src/components/ui/__tests__/AppIcon.test.js` if a new icon is added.

Tests:
1. Mobile toolbar renders icon controls with accessible labels.
2. Full desktop controls are hidden below `sm`; compact controls are hidden at `sm` and above.
3. Search icon toggles a full-width mobile search row.
4. Sort icon opens mobile sort options and emits the existing `sort-change` shape.
5. New-folder icon emits the existing `new-folder` event.
6. Row action containers do not contain `opacity-0` or `group-hover:opacity-100`.

Acceptance:
- `cd frontend && npm run test -- --run src/components/storage/__tests__/StorageBrowser.skeleton.test.js` passes.
- `cd frontend && npm run test -- --run` passes.
- `cd frontend && npm run build` passes.

## Verification

Manual UAT after implementation:

1. Set viewport to 375px.
2. Confirm row action buttons are visible without hover.
3. Confirm search/sort/new-folder are icon controls and can be used without horizontal scrolling.
4. Confirm list rows still show icon/name/actions only, with size hidden below `md` and modified hidden below `sm`.

## Non-Goals

- No redesign of the whole file browser.
- No new component parallel to `StorageBrowser.vue`.
- No backend or API changes.
- No changes to document/folder permissions or destructive action semantics.