kite/.planning/milestones/v0.2-phases/11-visual-design-responsive-layout-cleanup/11-07-SUMMARY.md at 123ae5b29b64f2d0459046549af40754c32542a7

curo/kite

Files

T

curo1305andClaude Sonnet 4.6 123ae5b29b chore: archive v0.2 phase directories to milestones/v0.2-phases/

Moves phases 08–11 execution artifacts from .planning/phases/ to
.planning/milestones/v0.2-phases/ to keep .planning/phases/ clean
for the next milestone.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-06-17 14:34:52 +02:00

3.3 KiB

Raw Blame History

phase, plan, subsystem, tags, dependency_graph, tech_stack, key_files, metrics

phase

plan

subsystem

tags

dependency_graph

tech_stack

key_files

metrics

11-visual-design-responsive-layout-cleanup

frontend

gap-closure

mobile

responsive

storage-browser

uat

requires

provides

affects

11-UAT

RESP-02

RESP-03

VISUAL-03-gap-closure

frontend/src/components/storage

frontend/src/components/documents

docs

added

patterns

StorageBrowser remains the single file browser surface

Mobile toolbar uses icon buttons below sm; full controls remain at sm+

modified

created

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

completed	tests_after	version
2026-06-17	277	0.1.4

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.

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

StorageBrowser remains the single local/cloud file browser
No backend/API behavior changed beyond patch version bump
Mobile row actions visible without hover
Mobile search/sort/new-folder controls fit without horizontal scrolling
Focus-visible classes retained on new icon buttons
Tests and build pass

3.3 KiB Raw Blame History

Phase 11 Plan 7: Mobile Storage Toolbar and Action Visibility Summary