[P0] Audit: Mobile layout has horizontal overflow and dense controls on tool pages

[baixiangcpp]

Imported from the byteflow.tools deep audit on 2026-06-22.

Problem: several tool pages are designed around two-column desktop workspaces. At mobile widths, controls become dense, input/output panels can overflow, and some actions are difficult to tap. This affects high-use tools such as JSON Formatter, Regex Tester, Image Resizer, Text Diff, JSON Diff, and All Tools filters.

Affected components:

• Tool workspaces with side-by-side input/output panels
• Diff viewers
• Image editing controls
• All Tools filter panel
• Command/search UI on small screens

Reproduction steps:

1. Open key tools at a 390px-wide viewport.
2. Test JSON Formatter, Regex Tester, Image Resizer, Text Diff, JSON Diff, and All Tools.
3. Try typing, selecting options, copying output, using filters, and scrolling long code.
4. Check for horizontal overflow, clipped controls, small tap targets, or inaccessible copy/download buttons.

Expected behavior: mobile users should be able to complete core workflows without horizontal page scrolling or tiny controls. Toolbars should collapse gracefully.

Actual behavior: some layouts remain desktop-like, controls are crowded, and long code/text areas can overflow.

Impact: lower mobile conversion, accessibility issues, poorer SEO mobile usability signals, and higher frustration for users opening tools from mobile search.

Proposed fix:

• Convert two-column tool layouts into stacked mobile layouts.
• Collapse secondary actions into an overflow menu.
• Set minimum tap target size to 44–48px.
• Add responsive wrapping for long URLs/code.
• Use drawer UI for filters.
• Add mobile regression screenshots for top 20 tools.

Acceptance criteria:

• No horizontal page overflow at 390px on top tools.
• Primary action remains visible without excessive scrolling.
• Tap targets meet mobile accessibility guidelines.
• Copy/download actions are reachable on mobile.
• Mobile Lighthouse accessibility and best-practice scores improve.

[baixiangcpp]

Closed as completed by the canonical BF audit backlog work. This older non-BF audit issue duplicates work now merged through PRs #209-#219, with the BF issues closed and guard/test coverage in place. The remaining non-duplicate follow-up is #7, which stays open because the upstream Next/PostCSS advisory is not fixed yet.