[P2] Audit: Output panels need better handling for long text, long URLs, and code overflow

[baixiangcpp]

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

Problem: many tools produce long text, URLs, Base64 strings, code snippets, headers, diffs, or JSON. Output panels should handle overflow consistently across desktop and mobile without breaking layout or hiding copy controls.

Affected tools:

• JSON Formatter
• Base64 Encode/Decode
• URL Parser & Query Editor
• cURL to Code
• Header Diff
• Text Diff Checker
• JSON Diff Viewer
• Open Graph Meta Generator
• YouTube/Vimeo Thumbnail Grabbers

Reproduction steps:

1. Open representative tools.
2. Generate very long output strings and multiline code.
3. Resize to 390px width.
4. Check wrapping, scrolling, copy button placement, and keyboard access.

Expected behavior: long output should be readable, scrollable, copyable, and not cause page-level horizontal overflow.

Actual behavior: some outputs may overflow or make copy controls hard to reach.

Impact: poorer mobile usability and difficult handling of real-world payloads.

Proposed fix:

• Standardize output panel component.
• Add soft wrap and horizontal scroll modes where appropriate.
• Keep copy/download controls sticky within output header.
• Add line numbers for code-like output where useful.
• Add overflow tests for long URLs and long Base64 strings.

Acceptance criteria:

• Long outputs do not break page layout.
• Copy/download controls remain accessible.
• Users can choose wrap or horizontal scroll for code-like content.
• Mobile output panels remain usable.

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

[baixiangcpp]

Reopening after acceptance review on 2026-06-24. The merged work improves mobile containment in several places, but this older audit issue is not fully satisfied: I did not find a standardized output panel with user-selectable soft-wrap versus horizontal-scroll modes for code-like output, nor overflow regression coverage for representative long URLs/Base64/code across the listed tools. Keep this open until long outputs remain readable/copyable on 390px mobile and users can choose wrap or scroll where appropriate.