kite/.planning/milestones/v0.2-phases/11-visual-design-responsive-layout-cleanup/11-07-PLAN.md

phase, plan, subsystem, tags, requirements, depends_on

phase	plan	subsystem	tags	requirements	depends_on
11-visual-design-responsive-layout-cleanup	7	frontend	gap-closure mobile responsive storage-browser uat	RESP-02 RESP-03 VISUAL-03	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.