# Mobile Web Review — 2026-10-21 (1)

Scope: responsive web UI, especially administrator and moderator workflows. This is a focused mobile review, not a backend or native-app audit. The attached screenshot was unavailable locally; findings were verified against source and Chromium browser screenshots.

## Prior Reviews Summary

No previous review files existed. Carried forward: 0. Resolved prior issues: 0.

## Phase 1: Code Quality

### Correctness & Bugs

The fixed-size canvas halo could expand the home page horizontally. The shell grid also lacked explicit shrinking constraints. Fixed in the home and shell styles.

### SOLID / Performance / Code Quality

No additional actionable issues identified within this mobile UI scope. Desktop and mobile menus reuse the same role-filtered navigation definition.

## Phase 2: Logical Consistency

### State Management / Consistency

Staff navigation permissions are shared by both layouts. Mobile section headings no longer expose collapsed state while showing the links. Dialogs render through a body portal and keep keyboard focus inside; action menus include their portal contents in outside-click handling.

### Domain & Application Layer / Data Flow

No application or server contracts changed. Added typed fixtures are confined to the existing E2E bridge.

## Phase 3: UI/UX

Nine findings fixed below. Verified with browser screenshots and responsive tests at 320, 390 and 430 CSS pixels. Desktop search/bootstrap/settings scenarios remain covered. This does not substitute for physical iOS/Android keyboard and safe-area testing.

## Tasks

- [x] 1. [UX] All staff links were compressed into an unlabelled bottom row. Keep three primary destinations plus More; show all permitted destinations, labels and pending badges in a scrollable navigation dialog — `apps/web/src/widgets/AppShell.tsx`, `Shell` / `NavSection`.
- [x] 2. [Visual] Search and profile competed for narrow header space. Use a dedicated full-width mobile search row for every search-position preference, and constrain the suggestion popup — `apps/web/src/widgets/AppShell.module.css`, mobile `.top`; `apps/web/src/widgets/SearchBox.module.css`, mobile popup.
- [x] 3. [UX] The user table required lateral scrolling to reach actions. Present labelled user cards on phones and open action menus in a body portal — `apps/web/src/pages/admin/UsersPage.tsx`, users table; `apps/web/src/shared/ui/ui.tsx`, `Menu`.
- [x] 4. [Bug] Dialog minimum-content width could push the close button outside a 320 px viewport. Constrain overlay grid tracks, allow content to shrink/wrap, and wrap footer actions — `apps/web/src/shared/ui/ui.module.css`, `.overlay` / mobile `.dialog`; `apps/web/src/shared/ui/ui.tsx`, `Dialog`.
- [x] 5. [UX] Moderation metadata/actions flowed into mismatched grid columns and native audio controls could expand the row. Put metadata and actions in the content column, constrain audio width, and compact the sticky bulk actions — `apps/web/src/pages/uploads/uploads.module.css`, mobile queue and bulk rules.
- [x] 6. [UX] Path-pattern tools competed with the expression input. Move tools below the input with a full-width enabled label and aligned touch buttons — `apps/web/src/pages/admin/library.module.css`, mobile `.patternRow` / `.patternTools`.
- [x] 7. [Bug] The floating player could overlap the mobile bottom navigation and its queue button was hidden. Reserve a player row for both variants, expose queue access, constrain the drawer, and preserve readable track text at 320 px — `apps/web/src/widgets/PlayerBar.module.css`, mobile player rules.
- [x] 8. [Accessibility] Settings, dialogs, track likes and mobile filters had small or hover-only targets. Increase key targets to 44 px, show track likes, wrap segmented controls and use 16 px form fields — `apps/web/src/shared/ui/ui.module.css`, `apps/web/src/pages/page.module.css`, `apps/web/src/entities/catalog.module.css`, mobile rules.
- [x] 9. [Visual] Oversized halo canvas and intrinsic grid widths caused horizontal scrolling. Clip only the home decoration horizontally, use shrinking shell tracks, and adapt catalogue columns and long titles — `apps/web/src/pages/home.module.css`, `.home`; `apps/web/src/widgets/AppShell.module.css`, `.shell`; `apps/web/src/pages/catalog.module.css`, mobile headings.

## Verification

- TypeScript typecheck.
- Existing unit/integration suite: 28 tests.
- Playwright: existing 4 desktop scenarios plus 4 mobile scenarios covering role navigation, user actions/create dialog, search positions, settings, populated moderation queue, path patterns, and the island player/queue.
- Browser screenshots inspected for users, create dialog, moderation, patterns, and player queue.