[P1] Audit: All Tools filters are dense and hard to use on mobile

[baixiangcpp]

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

Problem: the All Tools page exposes category, input type, execution, use case, and tag filters in a dense layout. On mobile, the filters take significant vertical space, are easy to mis-tap, and do not provide enough feedback when result counts change.

Affected URL:

• https://byteflow.tools/en/all-tools

Reproduction steps:

1. Open /en/all-tools at 390px width.
2. Tap Show filters.
3. Select multiple categories, input types, execution modes, use cases, and tags.
4. Try to clear filters and understand result count changes.
5. Scroll between filter controls and results.

Expected behavior: mobile filters should work like a focused filter drawer with clear selected states, visible result count, Apply/Clear actions, and easy dismissal.

Actual behavior: filters are functional but visually dense and not optimized for touch or small screens.

Impact: users may abandon the directory and rely only on search. Tool discovery suffers, especially for new users exploring categories.

Proposed fix:

• Convert mobile filters into a bottom sheet or full-screen drawer.
• Keep result count visible while selecting filters.
• Provide Apply, Clear, and Close controls.
• Use larger tap targets and grouped filter sections.
• Auto-scroll results to top after Apply.
• Add empty-result suggestions.

Acceptance criteria:

• Filter controls are comfortably tappable at 390px width.
• Selected filters are visually obvious.
• Result count updates and is visible.
• Clear filters resets state in one action.
• No horizontal overflow appears in the filter UI.

[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.