[Audit 25/32][P2][Mobile] Improve mobile layouts for catalog, tools, Pipeline Builder, and PWA install

[baixiangcpp]

Recommended execution order

25 of 32. Do after core desktop UX and performance fixes, because mobile layout should reuse stable components.

Evidence level

Static observation and inference; requires real mobile testing.

Problem

Complex surfaces such as All Tools, code-style inputs, file tools, and Pipeline Builder may be difficult on small screens. Risks include horizontal scrolling, keyboard overlap, small touch targets, and hard-to-read diagnostic panels.

Why this matters

Many users discover tools from search on mobile. Even if complex workflows remain desktop-first, mobile should support search, simple transformations, copy actions, and PWA guidance.

Recommended implementation

• Test mobile layouts on small, medium, and tablet-width screens.
• Stack input and output panels vertically on small screens.
• Increase touch target size for run, copy, clear, import, and export actions.
• Add a mobile-friendly Pipeline view or clearly mark Pipeline as desktop-optimized.
• Add platform-specific PWA install guidance.

Acceptance criteria

• No horizontal scrolling on home, All Tools, category pages, common tool pages, Pipeline Builder, Trust Center, and Install App.
• Inputs remain usable when the software keyboard is open.
• Primary actions are easy to tap.
• Copy/export actions show visible feedback.
• Pipeline Builder either works on mobile or clearly explains limitations.
• PWA install guidance is visible on mobile.
• Mobile test matrix is documented.

[baixiangcpp]

Automated mobile review coverage landed in PR #297 (80756c18fd8a4c3dc4154b75323837d6fbe777bb).

Completed in this batch:

• Added Playwright mobile review matrix for /en, /en/all-tools, /en/data-code-formats, /en/json-formatter, /en/pipeline-builder, /en/trust-center, and /en/install-app at 360x740, 390x844, 430x932, and 768x1024.
• Fixed shared touch targets for mobile/tablet buttons, inputs, selects, switches, accordions, tool action bars, JSON output controls, and Pipeline Builder controls.
• Reworked Pipeline Builder run logs into mobile cards with a desktop scrollable table.
• Verified no horizontal overflow and 44px touch target coverage in npm run test:e2e:smoke.
• Verified PWA smoke after the same matrix via npm run test:e2e:pwa.
• Documented the matrix in docs/accessibility/audit-25-26-mobile-a11y-matrix.md.

Still not closed because these acceptance items require real device/manual verification:

• Physical mobile software-keyboard overlap.
• Android Chrome / iOS Safari / Edge install behavior on real devices.
• Stable Lighthouse run in a clean browser environment.

[baixiangcpp]

PR #300 landed docs/accessibility/audit-23-25-26-manual-closure-runbook.md and guard coverage for the remaining #262 manual closure criteria.

Current status:

• Automated mobile matrix coverage is already in CI for representative routes, 360/390/430/768 viewports, no page-level overflow, and 44px touch targets.
• The remaining acceptance criteria are real Android Chrome and iOS Safari checks, especially software-keyboard overlap, portrait/landscape behavior, and Pipeline Builder usability on physical devices.
• The issue should stay open until those physical-device checks are run and the runbook closure template is posted here.

Latest validation for the runbook PR passed in CI: Cloudflare Pages and build (20.x).

[baixiangcpp]

Automated verification refresh on 2026-06-27 for main@eb58faca5f805e6a437f3ebc64de8385a98f7651.

Passed locally:

• npm run test:e2e:pwa

Relevant #262 coverage in that run:

• Representative mobile review matrix for /en, /en/all-tools, /en/data-code-formats, /en/json-formatter, /en/pipeline-builder, /en/trust-center, and /en/install-app.
• Viewports 360x740, 390x844, 430x932, and 768x1024.
• No horizontal overflow regressions and touch-target checks.
• Mobile command palette journey and mobile JSON/Base64/JWT/Regex/Cron journeys.

Also confirmed after PR #301 merge:

• CI on main passed: build (20.x) run 28285679896.

Keeping #262 open because the remaining close criteria still require physical Android Chrome and iOS Safari checks, especially software-keyboard overlap, portrait/landscape behavior, and Pipeline Builder usability on real devices.

[baixiangcpp]

Automated verification refresh on 2026-06-29 for current main.

Passed locally:

• npm run check:audit:prod-high passed. The production high/critical gate remains green; the known Next bundled PostCSS finding remains moderate and is tracked separately in Track upstream fix for Next bundled PostCSS advisory #7.
• npm test -- --run tests/guards/pwa-install-offline-issue-260.test.ts tests/guards/mobile-a11y-audit-issues-262-263.test.ts tests/guards/next-postcss-advisory-runbook.test.ts passed: 3 files, 11 tests.
• npm run test:e2e:pwa passed.
• npm run lint passed.
• npm run check:types passed.
• npm run validate passed.

Relevant #262 coverage refreshed by the PWA run:

• Representative mobile review matrix still passes on the covered routes.
• Automated no-horizontal-overflow checks remain green.
• Touch-target checks remain green.
• Mobile command palette journey remains green.
• Mobile JSON/Base64/JWT/Regex/Cron journeys remain green.
• Pipeline Builder smoke path remains covered through the shared desktop/mobile/PWA matrix.
• PWA install/offline smoke still passes after the same mobile matrix.

Recent remote evidence:

• Latest confirmed main CI run is green: 28374709014.

Boundary for closure:

• This refresh does not satisfy the manual acceptance criteria.
• [Audit 25/32][P2][Mobile] Improve mobile layouts for catalog, tools, Pipeline Builder, and PWA install #262 should stay open until physical Android Chrome and iOS Safari checks are run, especially software-keyboard overlap, portrait/landscape behavior, small-screen primary actions, copy/export feedback on-device, and Pipeline Builder usability on real mobile devices.

[baixiangcpp]

Additional UX audit note - 2026-07-01

A desktop visual pass could not fully verify the requested 390x844 and 430x932 mobile soft-keyboard scenarios. Keep the real-device/mobile closure requirement.

Suggested additions to the mobile matrix before closing:

• QR Code Generator: empty/default state, Sample, Clear, PNG/SVG actions, and content textarea with a long URL.
• Base64 Encode/Decode: text input with keyboard open, run action, output copy/download controls.
• JSON Formatter: large split input/output panels, sensitive input notice, import file affordance.
• CSV/JSON Converter: split input/output panels and top action row.
• JWT Decoder: tall token input and header/payload cards.
• Pipeline Builder: recipe gallery, step list, selected-step panel, run summary, and validation panel.

For each route, explicitly check page-level horizontal scroll, sticky header overlap, primary action reachability, and whether the software keyboard hides the active input or the run/copy action.

[baixiangcpp]

PR #336 merged as cb8b4ab with the #262 implementation preserved in commit 8fdf891.

Additional automated mobile evidence completed:

• 12 representative routes run at 360x740, 390x844, 430x932, and 768x1024 with touch-target and horizontal-overflow checks.
• QR, CSV, and Pipeline workflows run at 390x844 and 430x932.
• Reduced-height 390x420 keyboard proxies and 844x390 landscape proxies verify focused inputs and primary actions remain reachable.
• Pipeline Builder now has compact Steps, Input/output, and Inspector section navigation.
• Android Firefox/Edge users receive an explicit switch-to-Chrome instruction instead of Chrome menu steps presented as current-browser steps.
• Route-width validation produced 14 desktop screenshots; full smoke and remote CI passed.

Keeping #262 open because physical Android/iOS software-keyboard overlap, real browser chrome, device rotation, and Pipeline usability still require device evidence.