test(phase-11): record mobile UAT gaps
This commit is contained in:
curo1305
@@ -0,0 +1,105 @@
|
||||
---
|
||||
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.
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
status: diagnosed
|
||||
phase: 11-visual-design-responsive-layout-cleanup
|
||||
source:
|
||||
- 11-01-SUMMARY.md
|
||||
- 11-02-SUMMARY.md
|
||||
- 11-03-SUMMARY.md
|
||||
- 11-04-SUMMARY.md
|
||||
- 11-05-SUMMARY.md
|
||||
- 11-06-SUMMARY.md
|
||||
started: 2026-06-17T08:10:53Z
|
||||
updated: 2026-06-17T08:35:05Z
|
||||
---
|
||||
|
||||
## Current Test
|
||||
|
||||
[testing complete]
|
||||
|
||||
## Tests
|
||||
|
||||
### 1. Mobile Sidebar Drawer
|
||||
expected: At a 375px-wide viewport, the normal sidebar is hidden and a mobile header with a hamburger button is visible. Tapping the hamburger opens a slide-in sidebar drawer over the page; tapping the backdrop or navigating to a sidebar link closes it.
|
||||
result: pass
|
||||
|
||||
### 2. Mobile Storage Rows and Touch Targets
|
||||
expected: At a 375px-wide viewport, the document/folder list shows icon, name, and actions only. Size and modified-date columns are hidden, names truncate instead of overflowing, and row action buttons are large enough to tap comfortably.
|
||||
result: issue
|
||||
reported: "I cannot view the actions as they are only a hover-over action. This needs to be changes and they need to be always visible. If I am on a touchscreen I need to imagine where the buttons are and could accidentally delete files. Furthermore the search field, sorting field and new folder button are not as dynamic. They are fully visible at a 550 px-wide viewport but lower it shift out of the window on the right site."
|
||||
severity: major
|
||||
|
||||
### 3. Mobile-Safe Modals and Forms
|
||||
expected: Share, cloud credential, folder delete, and document preview modals fit within a small viewport. Modal content scrolls when needed, form controls look consistent, and fields/buttons remain reachable without horizontal scrolling.
|
||||
result: issue
|
||||
reported: "The mobile navigation is a bit difficult. The file browser is not scollable. I need to scroll sideways to access the sorting and new file buttons. Herre the searchfield, sorting and new file should morph into a icons for space savings."
|
||||
severity: major
|
||||
|
||||
### 4. Visual Consistency and Keyboard Focus
|
||||
expected: Page headings, panel headings, sidebar rows, buttons, and interactive links use consistent typography and spacing. Hover states are distinct, and keyboard tabbing shows visible focus rings on buttons, links, and sidebar tree controls.
|
||||
result: pass
|
||||
|
||||
### 5. Navigation and Lazy-Loaded Pages
|
||||
expected: Navigating to Topics, Document detail, Settings, Cloud storage, Shared, and Admin pages still works normally. Pages load without a blank-screen failure, auth/admin redirects behave as expected, and returning to the main file manager remains fast.
|
||||
result: pass
|
||||
|
||||
### 6. Bundle and Dead-Code Cleanup Smoke Check
|
||||
expected: The app production build succeeds, the baseline and final bundle reports exist in `.planning/perf/`, and removed dead-code views/components do not appear anywhere in the UI.
|
||||
result: pass
|
||||
|
||||
## Summary
|
||||
|
||||
total: 6
|
||||
passed: 4
|
||||
issues: 2
|
||||
pending: 0
|
||||
skipped: 0
|
||||
blocked: 0
|
||||
|
||||
## Gaps
|
||||
|
||||
- truth: "At a 375px-wide viewport, row actions are visible and safe to tap without relying on hover."
|
||||
status: failed
|
||||
reason: "User reported: actions are only hover-over, which makes them invisible on touchscreen and can lead to accidental deletes."
|
||||
severity: major
|
||||
test: 2
|
||||
root_cause: "StorageBrowser row action containers are hidden by default with `opacity-0 group-hover:opacity-100`, so touch devices have no reliable visible target. The buttons have 36px touch classes, but their parent remains invisible until hover."
|
||||
artifacts:
|
||||
- path: "frontend/src/components/storage/StorageBrowser.vue"
|
||||
issue: "Folder and file action containers use `opacity-0 group-hover:opacity-100 transition-opacity`."
|
||||
missing:
|
||||
- "Make row action controls visible by default, especially below `md`; do not rely on hover to reveal destructive actions."
|
||||
- "Add regression tests asserting action containers are visible without hover and buttons remain 36px minimum on mobile."
|
||||
debug_session: "inline-uat-diagnosis-2026-06-17"
|
||||
- truth: "Below 550px, the search field, sorting field, and new-folder button fit within the viewport without shifting off the right side."
|
||||
status: failed
|
||||
reason: "User reported: search, sorting, and new-folder controls are visible at 550px but shift out of the window on the right side below that width."
|
||||
severity: major
|
||||
test: 2
|
||||
root_cause: "StorageBrowser places BreadcrumbBar plus a right-aligned `ml-auto flex shrink-0` toolbar in one flex row. The toolbar contains a fixed-width `SearchBar` (`w-56`), text sort buttons, and a full text `New folder` button, so the cluster cannot shrink below narrow mobile widths."
|
||||
artifacts:
|
||||
- path: "frontend/src/components/storage/StorageBrowser.vue"
|
||||
issue: "Toolbar cluster uses `ml-auto flex items-center gap-2 shrink-0` and keeps full controls visible at all widths."
|
||||
- path: "frontend/src/components/documents/SearchBar.vue"
|
||||
issue: "Search input uses fixed `w-56` width."
|
||||
- path: "frontend/src/components/documents/SortControls.vue"
|
||||
issue: "Sort controls render three text buttons with active arrow text, with no compact mobile mode."
|
||||
missing:
|
||||
- "Introduce mobile-specific compact icon controls for search, sort, and new-folder below `sm` or the verified breakpoint."
|
||||
- "Allow expanded mobile search/sort UI to occupy its own full-width row or popover instead of pushing off-screen."
|
||||
- "Add responsive tests for toolbar behavior below 550px."
|
||||
debug_session: "inline-uat-diagnosis-2026-06-17"
|
||||
- truth: "On mobile, file-browser toolbar navigation does not require sideways scrolling; search, sort, and new-folder controls collapse into compact icon controls when space is tight."
|
||||
status: failed
|
||||
reason: "User reported: mobile navigation is difficult, the file browser is not scrollable, and they need sideways scrolling to access sorting and new-file buttons; search, sorting, and new-file should morph into icons for space savings."
|
||||
severity: major
|
||||
test: 3
|
||||
root_cause: "Same responsive toolbar constraint as Test 2: full text controls are always rendered in the sticky header, and the list container does not provide a usable alternative when the toolbar overflows horizontally."
|
||||
artifacts:
|
||||
- path: "frontend/src/components/storage/StorageBrowser.vue"
|
||||
issue: "No mobile compact toolbar state or icon-only controls exist."
|
||||
missing:
|
||||
- "Collapse search/sort/new-folder into icon buttons on mobile."
|
||||
- "Expose search and sort through accessible toggle panels or menus that fit within viewport width."
|
||||
- "Verify file browser remains vertically scrollable and never requires horizontal scroll for primary controls."
|
||||
debug_session: "inline-uat-diagnosis-2026-06-17"
|
||||
Reference in New Issue
Block a user