feat(web): make detail headers horizontally scrollable

[techotaku39]

Problem / Motivation

Long session detail titles, file names, and file paths are clipped on narrow screens. Mobile session headers also displayed only the agent and one secondary metadata field, hiding other enabled session information.

Summary

• Add reusable ScrollableSurface and ScrollableTitle components for native horizontal scrolling with edge-gradient overflow cues.
• Apply horizontal scrolling to session detail titles and file preview names/paths.
• Show all enabled and available mobile session metadata in a stable priority order.
• Hide native scrollbars on compact header surfaces while preserving horizontal scrolling.
• Preserve Android native long-press text selection by avoiding custom touch handlers.
• Add localized accessibility labels and focused Vitest/Playwright coverage.
• Leave the session list, backend APIs, database, and protocol unchanged.

Validation

• bun typecheck — passed.
• pwsh -NoProfile -File .\scripts\Invoke-HapiTaskPlaywright.ps1 -Name mobile-preview-title-scroll -Suite Root -TestArgs 'terminal-wrap-fidelity.spec.ts' — 2 passed.
• bun run --cwd web test -- src/components/ScrollableTitle.test.tsx src/components/SessionHeader.test.tsx src/routes/sessions/file.test.tsx src/lib/sessionHeaderMobileMetadata.test.ts — 26 passed.
• pwsh -NoProfile -File .\scripts\Invoke-HapiTaskPlaywright.ps1 -Name mobile-preview-title-scroll -Suite Root -TestArgs 'scrollable-title.spec.ts' — 1 passed.
• bun run build — passed.
• Manual smoke validation on the isolated Full-mode test environment with Runner and an active long-title session — passed.

Related Issues

None.

AI Disclosure

Prepared with assistance from OpenAI Codex (GPT-5.6). The implementation, tests, and validation were reviewed locally.